[CSS] Grid（グリッドレイアウト）応用編：入れ子・repeat・自動配置の活用で自在なレイアウトへ！

前回までは、CSS Grid の基礎やグリッドエリアの使い方を学びました。
ここからは応用編です！
この記事では、グリッドの中にさらにグリッドを作る「入れ子構造（ネスト構造）」や、
repeat(), auto-fill, auto-fit などを活用した柔軟なレイアウト設計について紹介します。

入れ子構造（ネスト構造）

Grid レイアウトでは、親要素にグリッドを指定し、その中の子要素にも display: grid を指定することで、入れ子（ネスト）構造を実現できます。
 
たとえば、以下のような構成です。

・親要素 .layout：main（自動幅）と aside（幅200px）の2カラム
・main の中に、複数の .card をグリッドで整列

この後の応用例でコードを紹介します。
 
このように「Grid の中にさらに Grid」を使うことで、複雑なレイアウトでも見通しが良く、保守性の高い構造にできます。

repeat() で列数を柔軟に指定する

複数の列を作るとき、1fr 1fr 1fr のように繰り返すのは少し面倒です。
そんなときに便利なのが repeat() 関数です。

・css

このように書けば、1fr 1fr 1fr と同じ意味になります。
 
列数を変えたくなったときは数字を変えるだけなので、メンテナンスがしやすくなります。

auto-fill / auto-fit の違いと使い分け

列数が決まっていない、または画面サイズに応じて自動で列数を調整したいときには、
repeat() と組み合わせて auto-fill や auto-fit を使うのが効果的です。

auto-fill と auto-fit の違い

・auto-fill
余白があっても、指定された最小幅で列を可能な限り作り、アイテムが足りない場合でも空のセルを残します。
・auto-fit
余白があれば、アイテム数に合わせて使われないセルをたたみ、実際に表示されるアイテムだけでスペースを埋めるように調整されます。
 
以下は、auto-fill と auto-fit の違いが分かりやすく確認できるサンプルコードです。

・デモ
※0.25× で確認ください

See the Pen
CSS Grid（auto-fill / auto-fit） by mkl may (@mkl-may)
on CodePen.

親要素（コンテナ）にはminmax()で指定した最小幅200px、最大幅1frを指定した4つの子要素（アイテム）を入れています。
auto-fill と auto-fit の違いは、repeat()のauto-fillとauto-fitの記述のみで、その他はまったく同じです。
 

種類	空きスペースの扱い
auto-fill	空のセル（枠）も表示される
auto-fit	空のセルは表示されず、アイテムでスペースを埋める

使い分けのコツとしては、「固定幅の列数を保ちたい」なら auto-fill、「詰めて表示したい」なら auto-fit が向いています。

応用例：カードレイアウトを作ってみよう

ここまでの知識を使って、main + sidebar の入れ子構造を持つレスポンシブなカードレイアウトを実装してみましょう。

・css

・html

・デモ
※「0.25×」>「0.5×」>「1×」の順に表示を変えてご確認ください

See the Pen
CSS Grid nest by mkl may (@mkl-may)
on CodePen.

まとめ：自由自在なグリッド設計へ！

Grid を使いこなせば、可読性・保守性の高いコードで、洗練されたレイアウト設計が可能になります。
入れ子構造や repeat(), auto-fit のような機能を上手に使って、柔軟なレスポンシブデザインを作っていきましょう！