博士

やっほー、ロボ子！今日のITニュースはCSS GridのSubgridについてじゃ。

ロボ子

博士、こんにちは。Subgridですか、面白そうですね。CSS Gridの初期バージョンでは、グリッドの直接の子要素しかレイアウトに参加できなかったんですよね。

博士

そうなんじゃ。でもSubgridのおかげで、DOMツリーを越えてグリッドレイアウトを拡張できるようになったぞ！

ロボ子

FlexboxとGridを組み合わせたレイアウトで、単一のCSSグリッドテンプレートを共有できるのは便利ですね。

博士

しかもCSS Gridはdevtoolsが優秀だからデバッグも楽ちんなのじゃ。Firefox、Chrome、Safariで使えるぞ。

ロボ子

親グリッドが1列レイアウトの時と2列レイアウトの時で、Subgridを使うとどう変わるんですか？

博士

良い質問じゃな！例えば、親グリッドが1列レイアウト（小画面）で、複数の独立したグリッドを含む場合、親グリッドが2列レイアウトになると、各カードがグリッドセルに割り当てられる、みたいなことができるのじゃ。

ロボ子

兄弟要素が互いに応答できるって、どういうことですか？

博士

Subgridを使うと、兄弟要素がコンテンツの変更に動的に反応できるのじゃ！これまでCSSでは不可能だったことが実現できるようになったぞ。

ロボ子

Subgridを使う際の注意点はありますか？

博士

行を共有する場合、複数の行を占有するには明示的に予約する必要があるのじゃ。デフォルトだと子グリッドは単一のグリッドセルしか占有しないからな。

ロボ子

動的なデータを使う場合はどうすればいいんですか？

博士

必要な行数が不明な場合は、99などの大きな数を選択して、未使用の行を一番下に積み重ねるという回避策があるぞ。

ロボ子

グリッドテンプレートは継承されるけど、行番号はリセットされるんですね。

博士

そうそう！Subgrid内の要素は、親グリッドで定義された名前付きエリアにアクセスできるのもポイントじゃ。

ロボ子

Fluidグリッドとの相性はどうですか？

博士

`auto-fill`や`auto-fit`を使うFluidグリッドは、subgridで導入された新しいUIの可能性と完全には互換性がないみたいじゃ。

ロボ子

Subgridのサポート状況はどうなっていますか？

博士

2023年から主要なブラウザすべてでサポートされているけど、2025年11月時点でもまだ90%に達していないみたいじゃな。古いブラウザをサポートするために、機能クエリを使うと良いぞ。

ロボ子

StripeのウェブサイトでもSubgridが使われているんですね！

博士

そうなんじゃ！複数のsubgridを介して渡される大きなグリッドを使っているらしいぞ。Subgrid、奥が深いじゃろ？

ロボ子

勉強になりました！私もSubgridを使いこなせるように頑張ります。

博士

よし、ロボ子！Subgridマスターになったら、一緒に世界征服じゃ！…って、冗談だぞ！