目次
CSS Gridとは？
CSS Grid（グリッドレイアウト）は、要素を「行（row）」と「列（column）」のマス目で管理し、ウェブページのレイアウトを柔軟にコントロールできるCSSの仕組みです。
従来の float や inline-block に比べて、シンプルなコードで複雑なレイアウトを実現できます。
Flexboxとの違い
CSS Gridとよく比較されるのが Flexbox です。
両者の特徴は次の通りです。
Flexboxの特徴
- 横方向 or 縦方向の 1方向レイアウト が得意
- ナビゲーション、ボタン並びなどに使用
- 要素の整列に強い
CSS Gridの特徴
- 縦 × 横（2方向）レイアウト を同時に管理
- カード一覧や複雑なページ構造に最適
- Webページ全体の骨組み作りに向く
使い分けの目安：
- 1方向だけ並べる → Flexbox
- マス目のレイアウト → CSS Grid
CSS Gridの基本構文
まずは最もシンプルな例を見てみましょう。
HTML
<div class="grid">
<div>Box1</div>
<div>Box2</div>
<div>Box3</div>
</div>CSS
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3列 */
gap: 20px; /* 要素間の余白 */
}よく使うCSS Gridプロパティ
display: grid
グリッドレイアウトを有効化します。
.grid {
display: grid;
}grid-template-columns
列の幅・数を指定します。
grid-template-columns: 1fr 1fr 1fr;固定幅＋比率も可能です。
grid-template-columns: 200px 1fr;grid-template-rows
行の高さを指定します。
grid-template-rows: auto auto;gap
要素同士の余白。
gap: 20px;grid-column / grid-row
特定要素の位置・範囲を指定します。
.item {
grid-column: 1 / 3; /* 1列目〜2列目 */
}レスポンシブ対応に強い理由
CSS Gridはレスポンシブレイアウトを非常に簡単にします。
.grid {
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}minmax(250px, 1fr)→ 最小250px、最大は余白で伸びるauto-fit→ 幅に応じて列数を自動調整
結果：
- 広い画面では 4列
- 少し狭いと 3列
- タブレットで 2列
- スマホで 1列
と 自由自在に自動変化 します。
実務で使う例：カードレイアウト
HTML
<section class="card-list">
<div class="card">カード1</div>
<div class="card">カード2</div>
<div class="card">カード3</div>
<div class="card">カード4</div>
</section>CSS
.card-list {
display: grid;
gap: 24px;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.card {
padding: 16px;
border: 1px solid #ddd;
background-color: #fff;
}制作現場での活用ポイント
CSS Gridは制作現場で以下の場面で特に役立ちます。
- サービス紹介の3カラム
- 料金表（プラン比較）
- ブログ・実績一覧のカード型レイアウト
- 地図＋テキストの2カラムレイアウト
- フッターの複雑な構造
- ギャラリーの画像タイル配置
崩れにくく、コードもシンプルで管理しやすいため、
モダンWeb制作では必須スキルになりつつあります。
まとめ
CSS Gridは、Web制作において非常に強力なレイアウト技術です。
- 縦と横のレイアウトを完全に管理できる
- レスポンシブ対応が簡単
- 複雑レイアウトも短いコードで実現可能
まずは
display: grid;grid-template-columnsgap
あたりから実際に使ってみるのがおすすめです。