要素間にパディングはありますが、どちらの側にもパディングはありません

Question

タイトル付きのカードを作成し、その下に他のカードを 2 列に配置しています。問題は、要素の周りではなく、要素間にパディングをしたいことです。少なくとも側面にはパディングしないと、タイトルが下のボックスと矛盾してしまうためです。これが私が欲しいものです:

各グリーン カードに異なるパディングを与えてみました。つまり、左上のパディングは 0 1em 1em 0、右上のパディングは 0 0 1em 1em などになります。このような「ハードコードされた」パディングではなく、任意の数のカード、列、行を含む一般的なソリューションがあれば、よりクリーンになります。出来ますか？

解決策の 1 つはヘッダーをパディングすることですが、これは見苦しい解決策のように思えます。

上下のパディングは存在できますが、その方が簡単な場合は、左右に配置することはできません。

関連コード:

リーリー リーリー

Answer 1

この問題を解決する最も簡単な方法は、これを追加することだと思います。

リーリー

を Flex コンテナー (この場合はレッド カード クラスの div タグ) に追加します。以下を試してみてください。

リーリー リーリー

Answer 2

グリッドはこの問題の解決策です。 grid-template-columns は、ブラウザに div を 2 行空けるよう指示します (3 列が必要な場合は、3 つの幅を指定するだけです。複数の列を同じ幅にしたい場合は # を使用することもできます) # ＃繰り返す（）＃＃＃ ）。次に、ngap を使用して間のスペースを変更します。

CSS のヒント

グリッドについての優れた入門書があります。Kevin Powell もこれについて優れた入門書を持っています

リーリー リーリー