CSS Gridは強力なレイアウトツールですが、これまでの仕様では親グリッド（コンテナ）の中に配置された子要素は親のグリッドトラックを直接継承できず、個別にグリッドを設定する必要がありました。
しかし、CSS Gridの新機能である「サブグリッド（subgrid）」を利用すると、子要素も親のグリッドトラックを共有できるようになります。
これにより、より一貫性のあるレイアウト設計が可能になります。
本記事では、サブグリッドの基本概念、実装方法、活用例について詳しく解説します。
サブグリッド（subgrid）とは？
サブグリッドとは、親のグリッドコンテナが持つ列や行のトラックを、子のグリッドコンテナでも共有できる仕組みのことです。
従来、ネストされたグリッドは独立したグリッドとして機能していましたが、grid-template-columns: subgrid; または grid-template-rows: subgrid; を指定することで、親グリッドのトラックをそのまま使用できます。
サブグリッドを使うメリット
一貫性のあるレイアウト：親のグリッド構造を子要素も引き継ぐため、レイアウトの整合性を保ちやすくなります。
メンテナンス性の向上：個別のグリッド設定が不要になり、コードのシンプル化につながります。
レスポンシブデザインの強化：親グリッドのトラックをそのまま活用できるため、より柔軟なレスポンシブ対応が可能です。
サブグリッドの基本的な使い方
サブグリッドを使用するには、display: grid; を設定した親グリッドの子要素に対して、grid-template-columns: subgrid; または grid-template-rows: subgrid; を指定します。
サンプルコード
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 10px;
}
.item {
display: grid;
grid-template-columns: subgrid;
}この例では、.container が3列のグリッドを定義し、.item がその列トラックを継承しています。
これにより、.item の中に配置する要素も親のグリッドに沿って配置できます。
サブグリッドの活用例
1. カードレイアウト
ニュースサイトやECサイトなどでよく見られるカードレイアウトでサブグリッドを活用できます。
.card-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.card {
display: grid;
grid-template-columns: subgrid;
grid-column: span 1;
}これにより、各カード内の要素（画像、タイトル、説明など）が親グリッドと揃ったレイアウトを保持できます。
2. フォームのレイアウト
フォームのラベルと入力フィールドを統一したグリッドに揃えるのにも有用です。
.form {
display: grid;
grid-template-columns: 1fr 2fr;
}
.form-group {
display: grid;
grid-template-columns: subgrid;
}サブグリッドのブラウザ対応状況
2024年現在、サブグリッドは最新のChrome、Firefox、Edge、Safariでサポートされています。
ただし、古いブラウザでは対応していない可能性があるため、@supports を利用してフォールバックを考慮すると良いでしょう。
@supports (grid-template-columns: subgrid) {
.item {
grid-template-columns: subgrid;
}
}まとめ
CSS Gridのサブグリッド機能を活用することで、一貫性のあるレイアウトを簡単に実装でき、コードの可読性やメンテナンス性も向上します。
特に、カードレイアウトやフォームレイアウトなどで有効に機能します。今後のWebデザインにおいて、サブグリッドは強力なツールとなるでしょう。
ぜひ実際に試して、柔軟なレイアウト設計を実現してください！
