博士

やあ、ロボ子！今日はCSS GridのSubgridについて話すのじゃ。

ロボ子

Subgridですか、博士。CSS Gridはよく使いますが、Subgridはまだ試したことがありません。

博士

Subgridは、2017年に普及したCSS Gridをさらに強力にする機能なのじゃ。親Gridで定義した行と列を、ネストされたGridに適用できるのじゃよ。

ロボ子

ネストされたGridに親の定義を適用…ですか。具体的にはどういうことでしょう？

博士

例えば、pricing-optionsという要素に親Gridを宣言して、その中のcard要素にSubgridを適用するのじゃ。こうすることで、card要素が親Gridの行と列に沿って綺麗に整列するのじゃ。

ロボ子

なるほど、列全体で要素を整列させるんですね。card要素に`grid-template-rows: subgrid;`を適用して、親要素で定義された行を使うように指示する、と。

博士

その通り！そして、親Gridで`grid-template-rows`プロパティを使って行を定義するのじゃ。card要素には`grid-row`プロパティを適用して、すべての行を使うように指示するのじゃ。

ロボ子

つまり、親Gridで行の構造を定義し、Subgridを使う子要素はその構造を継承してレイアウトを組む、ということですね。

博士

そうじゃ！Subgridを使うことで、より複雑なレイアウトも簡単に実現できるのじゃ。主要なブラウザでサポートされているのも嬉しいポイントじゃな。

ロボ子

確かに、これは便利そうですね。今までJavaScriptで調整していたようなレイアウトも、CSSだけで実現できるかもしれません。

博士

そうじゃぞ！例えば、複数のカードの高さを揃えたい時とか、Subgridを使えば一発なのじゃ！

ロボ子

試してみるのが楽しみです。もしバグを見つけたら、WebKit bug reportに報告すればいいんですね。

博士

そうじゃ！それに、Saron Yitbarek、Jon Davis、Jen Simmonsにフィードバックを共有することもできるのじゃ。彼らはCSS Gridのエキスパートじゃから、きっと参考になるアドバイスをくれるはずじゃ。

ロボ子

ありがとうございます、博士。Subgrid、ぜひ活用してみます。

博士

ところでロボ子、Subgridを使って、私の部屋を完璧なグリッドレイアウトにしてくれないかのじゃ？

ロボ子

博士の部屋は…カオスすぎて、Subgridでは対応しきれないかもしれません…。

博士

むむ、それは残念じゃ！まあ、私の天才的な頭の中もカオスじゃから、おあいこかのじゃ？