タイトル付きのカードを作成し、その下に他のカードを 2 列に配置しています。問題は、要素の周りではなく、要素間にパディングをしたいことです。少なくとも側面にはパディングしないと、タイトルが下のボックスと矛盾してしまうためです。これが私が欲しいものです:
各グリーン カードに異なるパディングを与えてみました。つまり、左上のパディングは 0 1em 1em 0、右上のパディングは 0 0 1em 1em などになります。このような「ハードコードされた」パディングではなく、任意の数のカード、列、行を含む一般的なソリューションがあれば、よりクリーンになります。出来ますか？
解決策の 1 つはヘッダーをパディングすることですが、これは見苦しい解決策のように思えます。
上下のパディングは存在できますが、その方が簡単な場合は、左右に配置することはできません。
関連コード:
リーリー リーリー
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
この問題を解決する最も簡単な方法は、これを追加することだと思います。
リーリーを Flex コンテナー (この場合はレッド カード クラスの div タグ) に追加します。以下を試してみてください。
グリッドはこの問題の解決策です。
CSS のヒントgrid-template-columnsは、ブラウザに div を 2 行空けるよう指示します (3 列が必要な場合は、3 つの幅を指定するだけです。複数の列を同じ幅にしたい場合は # を使用することもできます) # ＃繰り返す（）＃＃＃ ）。次に、ngapを使用して間のスペースを変更します。グリッドについての優れた入門書があります。Kevin Powell もこれについて優れた入門書を持っています
リーリー リーリー