Mozilla Hacksの「CSS Grid Level 2 – subgrid is coming to Firefox」を読みました。2019年の記事で、公開当時はsubgridがまだどのブラウザにも正式出荷されておらず、Firefox Nightlyでテストできるようになった段階として紹介されています。
Subgridは、CSS Gridでネストした要素を親グリッドの行や列に参加させるための仕組みです。通常のネストしたグリッドは内側だけで独立してトラックを持ちますが、subgridを使うと親グリッドのトラックサイズやラインを引き継げます。
記事の要点
- Subgridは、
grid-template-columnsやgrid-template-rowsに指定する新しいキーワード値として説明されています。 - 通常は
200px max-content 1frのようにトラックサイズを列挙しますが、subgridではgrid-template-columns: subgrid;のように親のトラックを使います。 - 親グリッドの直接の子でない要素も、親グリッドの列や行に沿って配置しやすくなります。
- カードレイアウトでは、カード内のヘッダーやフッターの高さを行としてそろえる用途が紹介されています。
- 12カラムレイアウトのような設計でも、深くネストされた部品を親のカラム体系に参加させられます。
- 繰り返し要素の数が不明な場合にも、親側の明示的なグリッドを保ちながら、内側の繰り返しを扱うパターンが紹介されています。
- Firefox DevToolsでは、複数グリッドのハイライトやsubgridバッジなど、複雑なグリッド構造を把握するための機能も整備されていました。
リンク先も見てわかったこと
記事内から参照されているMDNのCSS Grid LayoutとBasic concepts of grid layoutは、Grid全体の前提を確認する入口になります。SubgridはGridを知らない状態で読むより、まずトラック、ライン、明示的グリッド、暗黙的グリッドの考え方を押さえた方が理解しやすい機能です。
MDNのSubgridページと、Grid by Exampleの例は、記事内の説明を実際のコードパターンとして追うのに向いています。カード内の要素をそろえる例や、親グリッドのラインを利用する例は、文章だけよりも視覚的に見る方が理解しやすいです。
また、BugzillaのDevTools関連チケットでは、subgridを選択したときに親グリッドも半透明でハイライトする改善が追跡されています。SubgridはCSSの機能そのものだけでなく、DevToolsで構造を見えるようにすることも実用上かなり重要だったことがわかります。
気づき
今回の気づきは、subgridは単なる「ネストしたグリッドの便利機能」ではなく、コンポーネント化とページ全体の整列を両立させるための機能だという点です。部品をコンポーネントとして分けるほど、DOM上は親グリッドから遠くなります。しかしデザイン上は、見出し、本文、フッター、ナビゲーション、カード内要素を同じ列や行にそろえたい場面があります。
Subgridは、そのずれをCSS側で吸収します。内側の部品を完全に独立した小さなレイアウトとして閉じ込めるのではなく、必要なときだけ親のトラック体系へ戻せる。これは、HTML構造を無理にフラットにしたり、寸法を重複定義したりする代わりになる実用的な逃げ道です。
もう一つ印象的なのは、DevTools対応が記事の中で大きく扱われていることです。レイアウト機能は、仕様として存在するだけでは使いこなしにくい。親と子のグリッドがどう重なっているかを見える化できて初めて、開発者が安心して使える機能になります。
読むとよさそうな人
- CSS Gridを使ったカードレイアウトや12カラムレイアウトで、内側の要素がそろわず困ったことがある人
- Subgridが通常のネストしたGridと何が違うのか知りたい人
- Firefox DevToolsのGrid Inspectorが、レイアウト理解にどう役立つか知りたい人
コメントを残す