Web開発において、きれいで整列されたカードレイアウトを作成することはよくあるタスクです。このチュートリアルでは、1行に4つのカードからなるグリッドの構築方法を順を追って説明します。各カードには、タイトル、画像、価格、箇条書きリスト、行動喚起（CTA）ボタンなど、いくつかのコンテンツブロックが含まれており、これらをCSS Gridと強力なCSS Subgrid機能を使用してカード内で水平方向に整列させます。 構築するもの - カードグリッドレイアウト（1行あたりのカードは最大4枚）。 - 各カードには、水平方向に整列された複数のコンテンツブロックが含まれます。 - 全体レイアウトにはCSS Gridを使用。 - 各カード内のコンテンツの内側整列にはCSS Subgridを使用。 CSS Subgridを使用する理由 CSS Subgridは比較的新しい機能で、ネストされたグリッドが親グリッドのトラックサイズを継承することを可能にします。これにより、トラックサイズを手動で計算したり重複させたりすることなく、内側のコンテンツを外側のグリッドに完全に整列させることができます。