タイトル付きのカードを作成し、その下に他のカードを 2 列に配置しています。問題は、要素の周りではなく、要素間にパディングをしたいことです。少なくとも側面にはパディングしないと、タイトルが下のボックスと矛盾してしまうためです。これが私が欲しいものです:
各グリーン カードに異なるパディングを与えてみました。つまり、左上のパディングは 0 1em 1em 0、右上のパディングは 0 0 1em 1em などになります。このような「ハードコードされた」パディングではなく、任意の数のカード、列、行を含む一般的なソリューションがあれば、よりクリーンになります。出来ますか？
解決策の 1 つはヘッダーをパディングすることですが、これは見苦しい解決策のように思えます。
上下のパディングは存在できますが、その方が簡単な場合は、左右に配置することはできません。
関連コード:
リーリー リーリー
P粉1655228862024-03-30 11:08:27
この問題を解決する最も簡単な方法は、これを追加することだと思います。
リーリーを Flex コンテナー (この場合はレッド カード クラスの div タグ) に追加します。以下を試してみてください。
P粉2783794952024-03-30 11:05:30
グリッドはこの問題の解決策です。 grid-template-columns は、ブラウザに div を 2 行空けるよう指示します (3 列が必要な場合は、3 つの幅を指定するだけです。複数の列を同じ幅にしたい場合は # を使用することもできます) # ＃繰り返す（）＃＃＃ ）。次に、ngap を使用して間のスペースを変更します。
グリッドについての優れた入門書があります。Kevin Powell もこれについて優れた入門書を持っています< a href="https://www.youtube.com/watch?v=rg7Fvvl3taU" rel="nofollow noreferrer">
リーリー リーリー