はじめに：CSS Gridとは？
CSS Grid（グリッドレイアウト）は、Webページ全体を2次元のグリッドに基づいてレイアウトできる、強力かつ柔軟なCSSの機能です。これまでのfloatやflexboxでは困難だった複雑なレイアウトも、Gridを使えば驚くほど簡単に実現できます。
この記事では、CSS Gridの基本から応用、関連プロパティ、実際に使えるサンプルコードを紹介し、これからGridを使いたい初心者の方にも分かりやすく解説します。
display: grid;の基本
まずは基本の記述方法から見ていきましょう。
.contaner {
display: grid;
}このように、display: grid;を指定することで、その要素の中身が「グリッドコンテナ」として機能します。中にある子要素は「グリッドアイテム」となり、grid-template-columnsやgrid-template-rowsで、行と列の構成を指定できます。
主要なプロパティ一覧と解説
Gridには多くの便利なプロパティがあります。ここではよく使うプロパティを一つずつ簡潔に解説します。
grid-template-columns / grid-template-rows
列・行のサイズを定義します。
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
}- fr: 空間の比率（fraction）で指定
- auto: 内容の高さに合わせる
- px, %なども指定可
gap / row-gap / column-gap
グリッドアイテムの間隔を指定します。
.container {
gap: 20px;
}grid-column / grid-row
アイテムが占める行や列の範囲を指定します。
.item {
grid-column: 1 / 3;
grid-row: 1 / 2;
}grid-area
アイテムの位置を名前で指定できる便利なプロパティです
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar content";
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}サンプルコード：レスポンシブな2カラムレイアウト
<div class="grid-layout">
<header>Header</header>
<nav>Sidebar</nav>
<main>Main Content</main>
<footer>Footer</footer>
</div>
.grid-layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 1fr 3fr;
grid-gap: 20px;
}
header {
grid-area: header;
}
nav {
grid-area: sidebar;
}
main {
grid-area: main;
}
footer {
grid-area: footer;
}
@media (max-width: 768px) {
.grid-layout {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
}
}よくあるGridレイアウトのパターン
- 3カラム（サイドバー＋メイン＋サイド）
- カード型レイアウト（Pinterest風）
- グリッドギャラリー（画像レイアウト）
Flexboxとの違いは？
| 比較項目 | CSS Grid | Flexbox |
| 軸の方向 | 2次元（行×列） | 1次元（行 または 列） |
| レイアウト用途 | 全体構造・大枠向き | コンポーネント・部分用 |
| 並べ方の自由度 | 高い（位置指定可） | 自動で並ぶ（順序固定） |
応用プロパティでさらに使いやすく！CSS Gridを極める
CSS Gridの基本が理解できたら、次は応用的なプロパティにも挑戦してみましょう。複雑なレイアウトや、レスポンシブ対応、可変コンテンツに役立つ便利なプロパティをご紹介します。
grid-auto-flow
grid-auto-flow は、自動配置されるアイテムの流れを指定するプロパティです。
.container {
display: grid;
grid-auto-flow: row;
}- row（デフォルト）：左から右、上から下に並ぶ
- column：上から下、左から右に並ぶ
- dense：空いているスペースを詰めて配置
.container {
display: grid;
grid-auto-flow: row dense;
}denseの注意点：順番が保証されなくなることもあるため、順序が重要なレイアウトには不向きです。
minmax()
要素のサイズを「最小〜最大範囲」で柔軟に設定できます。
.container {
display: grid;
grid-template-columns: repeat(3, minmax(150px, 1fr));
}このように設定すれば、150pxを下限としつつ、余白があれば等間隔に広がる列ができます。
これは特に、画面サイズに応じて**「可変だけど崩れにくいレイアウト」**を作りたいときに便利です。
auto-fit と auto-fill（レスポンシブ対応）
repeat()の中で、auto-fitやauto-fillと組み合わせると、中身に応じて列数が自動調整されるレイアウトが作れます。
.container {
display: grid;
grid-template-columns: repeat (auto-fit, minmax(200px, 1fr));
gap: 20px;
}auto-fitとauto-fillの違い
- auto-fit：空きスペースがあれば、列として扱い縮む（折りたたむ）
- auto-fill：列数だけは維持して、空白でも幅をとる
| 使い分け例 | auto-fit | auto-fill |
| 折りたたみたい | ○ | × |
| レイアウト維持したい | × | ○ |
grid-template（まとめて定義）
グリッドの行・列・エリアを一括定義できる便利プロパティです。
.container {
display: grid;
grid-template:
"header header" 80px
"sidebar content" auto
"footer footer" 60px / 200px 1fr;
}- 最後の / 200px 1fr は列のサイズ
- 行の高さとグリッドエリアの構成を一気に定義
便利なCSS Gridジェネレーター
以下のようなツールを活用することで、複雑なCSS Gridの構成も簡単に設計できます。
まとめ
CSS Gridは「レイアウトの革命」とも言われるほど、柔軟で直感的なレイアウト手法です。特にレスポンシブ対応や複雑なレイアウトには非常に向いています。
今後もWebデザインの現場でますます重要になるGridを、ぜひ日常の制作で活用してみてください。CSS Gridの応用プロパティは、ただの2次元レイアウトだけにとどまらず、「効率」「可読性」「保守性」すべてを高める重要な技術です。
特に以下のポイントを押さえておくと実務で非常に役立ちます
grid-templateで視認性の高いコードが書ける
minmax() + auto-fitで、レスポンシブなグリッドgrid-auto-flow: dense;で隙間のない詰め方が可能