CSSグリッド とは？
- 行と列を定義して要素を格子状に配置するCSSのレイアウト手法
- 二次元（縦横同時）のレイアウト制御が得意
- grid-template-columnsやgrid-template-rowsで構造を定義する
- ページ全体のレイアウトや複雑なデザインに向いている
ひよこ CSSグリッドって何？
ペンギン先生 CSSで行と列を作って、要素を格子状に配置するレイアウト手法だよ。「display: grid」で格子の枠組みを作り、「grid-template-columns: 1fr 1fr 1fr」で3列の等幅レイアウトが簡単にできるんだ。
ひよこ 「fr」って何？
ペンギン先生 fraction（分数・割合）の略で、利用可能なスペースを分配する単位だよ。「1fr 2fr」だと全体を3等分して左に1/3、右に2/3を割り当てる。pxやパーセントより直感的にスペースを配分できるから便利なんだ。
ひよこ Flexboxがあるのにグリッドも必要なの？
ペンギン先生 Flexboxは一方向（横か縦）の配置が得意だけど、グリッドは縦横同時に制御できる。たとえば「ヘッダー・サイドバー・メインコンテンツ・フッター」みたいなページ全体のレイアウトはグリッドが圧倒的に楽だよ。両方を場面に応じて使い分けるのがベストだね。
ひよこ おもしろい！CSSグリッドで高度なテクニックってある？
ペンギン先生 grid-template-areasを使うと、レイアウトをASCIIアートみたいに視覚的に定義できるんだ。「"header header" "sidebar main" "footer footer"」のように書くとそのままの配置になる。さらにminmax()とauto-fillを組み合わせた「repeat(auto-fill, minmax(300px, 1fr))」は、メディアクエリなしでレスポンシブなグリッドが作れる超便利なパターンだよ。ただ、subgridという機能がまだ発展途上で、入れ子のグリッド要素を親グリッドの行列に揃えたいときにブラウザ対応状況を確認する必要がある。CSSグリッドは書けるレイアウトの幅が広い分、最適解を見つけるのに経験が要るんだよ。