CSS Grid完全解説-Webレイアウトが劇的に変わる最強レイアウト技術

Web制作のレイアウトは長い間、さまざまな方法で実装されてきました。
昔はテーブルレイアウト、次にfloatレイアウト、そしてFlexboxが主流となりました。
しかし現在、より強力で柔軟なレイアウト手法として注目されているのが
CSS Grid（グリッドレイアウト） です。

CSS Gridは、縦と横の両方を同時に管理できるレイアウトシステムで、
複雑なWebレイアウトをシンプルなコードで実現できます。

この記事では、CSS Gridの基本から実務での使い方までを、初心者にも分かりやすく解説します。

CSS Gridとは？

CSS Gridとは、2次元レイアウトを作るためのCSS機能です。

これまでよく使われてきたFlexboxは「1次元レイアウト」です。

つまり

Flexbox→ 横 または 縦

Grid→ 横＋縦

この違いが非常に重要です。

例えば次のようなレイアウトがあります。

[ヘッダー][メニュー] [メイン][フッター]

Flexboxでは少し複雑になりますが、Gridなら簡単に作れます。

CSS Gridの基本構造

CSS Gridはコンテナ と アイテムの2つで構成されます。

例

.container {
  display: grid;
}

この display: grid; を指定すると、
その要素の子要素が Gridアイテム になります。

例

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Gridの基本プロパティ

CSS Gridを理解するには、いくつかの基本プロパティを覚える必要があります。

grid-template-columns

横のカラムを設定します。

例

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

これで3列のレイアウトになります。

[200px][200px][200px]

fr単位

Gridでは fr という特別な単位が使えます。

例

grid-template-columns: 1fr 1fr 1fr;

これは

1 : 1 : 1

の割合になります。

例えば

grid-template-columns: 1fr 2fr 1fr;

だと

1 : 2 : 1

の幅になります。

grid-template-rows

縦の行を設定します。

grid-template-rows: 100px 200px;

gap

要素間のスペースです。

gap: 20px;

Flexboxの margin 調整よりも簡単です。

Gridレイアウトの例

次のようなレイアウトを作ってみましょう。

商品一覧商品 商品 商品
商品 商品 商品

HTML

<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

repeat() を使うとコードがシンプルになります。

repeat()

例

grid-template-columns: repeat(3, 1fr);

これは

1fr 1fr 1fr

と同じ意味です。

実務でよく使うGrid

GridはカードUIなどでよく使われます。

例

ブログ記事一覧記事カード
記事カード
記事カード

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

レスポンシブGrid

Gridはレスポンシブにも強いです。

例

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

これで

• PC → 3列
• タブレット → 2列
• スマホ → 1列

のように自動調整されます。

auto-fit

auto-fit は
自動でカラム数を調整します。

minmax()

最小サイズと最大サイズを指定できます。

例

minmax(250px, 1fr)

意味

最低250px
最大は余白いっぱい

Gridエリア

Gridではレイアウトを名前で管理できます。

例

header
sidebar main
footer

CSS

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

各要素

header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }

HTML

<header></header>
<aside></aside>
<main></main>
<footer></footer>

GridとFlexboxの違い

GridとFlexboxはどちらも重要です。

違いを整理します。

Flexbox

• 1次元
• UI配置
• ナビゲーション

Grid

• 2次元
• レイアウト
• ページ構造

つまり

Grid → レイアウト
Flex → UI配置

という使い分けが理想です。

Gridのメリット

CSS Gridのメリットは非常に多いです。

コードがシンプル

floatやpositionを使うよりも、コードが短くなります。

レスポンシブに強い

auto-fitやminmaxを使うことで、柔軟なレイアウトが作れます。

レイアウトが直感的

Gridエリアを使うと、レイアウトを視覚的に管理できます。

CSS Gridの注意点

便利なGridですが、いくつか注意点もあります。

IE非対応

古いブラウザでは対応していません。

ただし現在は問題になるケースは少ないです。

Flexboxとの使い分け

Gridだけで作るのではなく、

• レイアウト → Grid
• UI配置 → Flex

の組み合わせがベストです。

まとめ

CSS Gridは、現代のWeb制作において非常に重要な技術です。

ポイントをまとめます。

① Gridは2次元レイアウト
② display:gridで開始
③ fr単位で柔軟な幅
④ repeatで簡潔なコード
⑤ auto-fitでレスポンシブ
⑥ Gridエリアでレイアウト管理

FlexboxとGridを適切に使い分けることで、

よりシンプルで保守性の高いCSS

を書くことができます。

これからのWeb制作では、
Gridを使えるかどうかでレイアウト設計の自由度が大きく変わります。

まだ使ったことがない方は、ぜひ一度Gridレイアウトを試してみてください。
きっとその便利さに驚くはずです。

お気に入り