CSS Gridは、二次元のグリッドベースのレイアウトシステムを定義して、ユーザーインターフェイスデザインに最適化されたCSSの比較的新しい機能である。これは複雑なクラスのセットに依存する960など、既存のサードパーティーグリッドシステムを置き換えるために設計された。CSS Gridの最初のリリースではいくつかの機能が準備できていなかったため、CSS Gridは「Level 1」モジュールとしてマークされ、将来のリリースで機能を追加するオプションが残されていた。
2年後、CSS Grid level2は、ほぼリリース準備ができた。これはFirefox nightlyでテストされているsubgridと呼ばれる新しい機能のリリースに焦点を絞った小さなアップデートである。
Subgridは子要素のサイズを親要素のサイズ定義に合わせることができる新しいプロパティである。これはgrid-template-columnsとgrid-template-rowsの中で利用できる。グリッドのサイズを直接定義する代わりに、直接の親が指定するサイズを継承できる。
例えば以下のgrid-template-rowsを定義する代わりに:
grid-template-rows: 150px 200px 150px;
subgridを使って内部グリッドに直接の親からの値を継承を指示できる:
grid-template-columns: subgrid;
Subgridは、ネストされたグリッドアイテムをプライマリグリッドに合わせるのが難しいという現在のCSS Grid実装の特定の制約に対処する高度な機能である。この変更は、ネストされたGridを使っていないサイトには影響がない。
一般的な利用例は、複数の子要素の列/行にわたって同様のサイズを追跡することである。例えば、ヘッダーとコンテンツを含むウィジットのリストを作成すると、以下のようにヘッダー/コンテンツの高さが均一でなくなる。これは子グリッドの各要素が独自の高さを維持しながら行を拡張することが難しくなるために発生する。
subgridのリリース前にこの問題や同じような問題を解決することは非常に困難だが、subgridはこれらのシナリオを解決するために作成され、非常にシンプルになった。
上記の2行のウィジットレイアウトは以下のように修正できる:
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
.widget {
display: grid;
grid-template-rows: subgrid;
grid-row: auto / span 2;
gap: 0px;
}
.header {
font-weight: bold;
}
.content {
text-align: justify;
}
正確なリリース日は未定だが、Firefox Nightlyを使ってsubgridを試すことができる。
subgridの詳細は、MDN Web Docsにある完全なリストと例を参照してほしい。