CSS Gridはウェブレイアウトデザインを変革しましたが、多くの開発者はその表面しか触れていません。基本的なgrid-template-columns: 1fr 1fr 1frの背後には、複雑でレスポンシブなレイアウトを最小限のコードで処理する強力な機能が眠っています。本記事では、プロフェッショナルなフロントエンド開発者が知るべき高度なGridパターンを解説します。
名前付きグリッドエリア
行番号ベースの配置はレイアウトが複雑になると可読性が低下します。名前付きグリッドエリアを使用すると、CSS自体がワイヤーフレームのように機能します。
.page {
display: grid;
grid-template-columns: 220px 1fr 200px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
}
header { grid-area: header; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }
ブレークポイントでgrid-template-areasを変更するだけで、HTMLを触らずにレスポンシブな配置変更が可能です。
Auto-Fill vs Auto-Fit
auto-fillとauto-fitの違いは微妙ですが重要です。両方ともrepeat()とminmax()と併用しますが、アイテム数がトラック数より少ない場合の動作が異なります。
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
}
| 動作 | auto-fill | auto-fit |
|---|---|---|
| 空のトラック | スペースとして保持 | ゼロに折り畳み |
| コンテンツの幅 | 同じ列数 | 空スペースを埋めるよう拡張 |
| 最適な用途 | 正確な列数が必要な場合 | 流動的なカードグリッド |
通常はauto-fitの方が柔軟で、アイテムが利用可能なスペースを埋めるように拡張されるため、カードグリッドに適しています。
DenseパッキングとSubgrid
可変サイズのアイテムがある場合、grid-auto-flow: denseで隙間を自動的に埋められます。
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-flow: dense;
gap: 0.5rem;
}
.gallery .tall { grid-row: span 2; }
.gallery .wide { grid-column: span 2; }
Subgridは親グリッドの列トラックを子グリッドが継承する機能で、カードレイアウトの整列問題を解決します。
.card-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.card {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
}
これにより、すべてのカードのタイトル、説明文、ボタンがコンテンツの長さに関係なく揃います。
メディアクエリ不要のレスポンシブ
RAM（Repeat, Auto, Minmax）パターンを使えば、メディアクエリなしで完全にレスポンシブなグリッドが実現できます。
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: clamp(0.5rem, 2vw, 2rem);
}
この1行で、モバイルの1列からデスクトップの複数列まで自動適応します。clamp()を組み合わせて、ビューポートに応じて変動するタイポグラフィとスペーシングも実現できます。
ダッシュボードレイアウト
実践的なダッシュボードでは、名前付きエリアでページ構造を定義し、内部のウィジェットグリッドにauto-fillを組み合わせます。
.dashboard {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 60px 1fr;
grid-template-areas:
"sidebar header"
"sidebar main";
height: 100vh;
}
サイドバーにはposition: sticky、メインコンテンツにはoverflow: autoを適用します。ページ全体の構造にGrid、個々のウィジェット内の整列にFlexboxを使うハイブリッド手法が最も効果的です。すべてのモダンブラウザがGridを完全サポートしており、従来の手法よりはるかに少ないコードで複雑なレスポンシブデザインを実現できます。