【CSS Grid完全攻略】ビジュアルツールで学ぶモダンレイアウト設計

CSS でレイアウトを組むとき、Flexbox だけで頑張っていませんか？

Flexbox が「1方向（横か縦）の並び」を得意とするのに対し、CSS Grid は縦横2次元のレイアウトを宣言的に書ける仕様です。ヘッダー・サイドバー・メインコンテンツ・フッターが絡み合う複雑な構造も、Grid なら数行で表現できます。

この記事では CSS Grid の基本から実践パターンまでをコード付きで解説します。また、記事の後半で「ドラッグ操作でレイアウトを組んでコードを自動生成できるツール」も紹介するので、概念を学びながらすぐ試せます。

CSS Grid とは

CSS Grid Layout は、2次元グリッド（格子状の座標系）上に要素を配置するための CSS 仕様です。2017年に主要ブラウザが対応し、現在はすべての現代ブラウザで安定して使えます。

基本的な考え方は次のとおりです。

• グリッドコンテナ: display: grid を指定した親要素
• グリッドアイテム: コンテナの直接の子要素
• グリッドライン: 行・列を区切る仮想の線（番号で参照できる）
• グリッドトラック: ライン間の領域（行・列のこと）
• グリッドセル: 行トラックと列トラックが交差した1マス
• グリッドエリア: 複数のセルをまとめた矩形領域

グリッドライン（列）
1    2    3    4
|    |    |    |
+----+----+----+  --- グリッドライン（行）1
|セル|セル|セル|
+----+----+----+  --- グリッドライン（行）2
|セル|セル|セル|
+----+----+----+  --- グリッドライン（行）3

基本プロパティのコード例

grid-template-columns / grid-template-rows

列と行のトラックサイズを定義します。

.container {
  display: grid;

  /* 3列：それぞれ 200px / 1fr / 1fr */
  grid-template-columns: 200px 1fr 1fr;

  /* 2行：それぞれ 80px / auto */
  grid-template-rows: 80px auto;
}

1fr は「余白を均等に分配する」単位です。repeat() を使うと繰り返しをまとめられます。

/* 4列均等 */
grid-template-columns: repeat(4, 1fr);

/* 12カラムグリッド */
grid-template-columns: repeat(12, 1fr);

gap

行・列のセル間余白を指定します。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  /* 行列ともに 16px の余白 */
  gap: 16px;

  /* 行 16px、列 24px と個別に指定 */
  gap: 16px 24px;
}

grid-column / grid-row（アイテム側のプロパティ）

アイテムがどのラインからどのラインまでを占有するかを指定します。

.item-a {
  /* 列ライン1から3まで（2列分） */
  grid-column: 1 / 3;

  /* span を使うと「何列分」と書ける */
  grid-column: 1 / span 2;

  /* 行ライン1から2まで（1行分） */
  grid-row: 1 / 2;
}

/* 横幅いっぱい（列数に関わらず） */
.full-width {
  grid-column: 1 / -1;
}

よくあるレイアウトパターン3選

パターン1：聖杯レイアウト（Holy Grail Layout）

ヘッダー・サイドバー・メインコンテンツ・フッターの古典的な構成です。

<div class="layout">
  <header class="header">Header</header>
  <nav class="sidebar">Sidebar</nav>
  <main class="main">Main Content</main>
  <footer class="footer">Footer</footer>
</div>

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr 48px;
  min-height: 100vh;
  gap: 0;
}

.header {
  grid-column: 1 / -1;
  grid-row: 1;
}

.sidebar {
  grid-column: 1;
  grid-row: 2;
}

.main {
  grid-column: 2;
  grid-row: 2;
}

.footer {
  grid-column: 1 / -1;
  grid-row: 3;
}

Flexbox で実現しようとすると入れ子が深くなりがちですが、Grid なら親1つで完結します。

パターン2：カードグリッド

EC サイトや記事一覧でよく見るカード型の均等配置です。

.card-grid {
  display: grid;

  /* 最低 280px を確保しつつ、余白を均等分配 */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: 24px;
}

auto-fill + minmax() の組み合わせがポイントです。コンテナ幅が広ければ列数が増え、狭くなれば自然に折り返します。メディアクエリを書かなくても、ある程度のレスポンシブ対応が自動でかかります。

パターン3：ダッシュボードレイアウト

KPIカードと大きなチャートを組み合わせたダッシュボード構成です。

<div class="dashboard">
  <div class="kpi kpi-1">KPI 1</div>
  <div class="kpi kpi-2">KPI 2</div>
  <div class="kpi kpi-3">KPI 3</div>
  <div class="chart-main">Main Chart</div>
  <div class="chart-sub">Sub Chart</div>
</div>

.dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 300px;
  gap: 16px;
}

.kpi-1 { grid-column: 1; grid-row: 1; }
.kpi-2 { grid-column: 2; grid-row: 1; }
.kpi-3 { grid-column: 3; grid-row: 1; }

.chart-main {
  grid-column: 1 / span 2;
  grid-row: 2;
}

.chart-sub {
  grid-column: 3;
  grid-row: 2;
}

でも毎回手で書くのは地味に面倒

CSS Grid の仕様は理解できても、実際にレイアウトを組むたびに「この grid-column: 2 / span 3 は本当に正しいか」と確認しながら書くのは骨が折れます。

そこで、ドラッグ操作でグリッドを組んで HTML/CSS を自動生成するツールを作りました。

CSS Grid Generator の使い方

ステップ1：グリッドの基本設定

設定	内容	例
Columns	列数	3
Rows	行数	4
Gap	セル間余白（px）	16
Width	コンテナ幅	100%
Height	コンテナ高さ	600px

Width・Height は単位をドロップダウンで切り替えられます（px / % / vw / vh / em / rem）。

ステップ2：アイテムをドラッグで配置

グリッドセル上でマウスをドラッグすると選択範囲がハイライトされ、離すとアイテムが配置されます。アイテムをダブルクリックで削除、"Reset Grid" ボタンで全リセットできます。

ステップ3：コードをコピーして使う

画面下部の Generated HTML・Generated CSS をコピーして、そのままプロジェクトに貼り付けるだけです。@media (max-width: 768px) のレスポンシブ対応コードも自動で含まれます。

/* 生成されるCSS（例） */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
  height: 600px;
}

.div-1 {
  grid-column: 1 / span 3;
  grid-row: 1 / span 1;
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .grid-container > div {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

まとめ

CSS Grid を使いこなすには、プロパティを覚えることよりも「グリッドラインの座標でレイアウトを考える」という発想の切り替えが最初のハードルです。

ビジュアルで試しながら生成されたコードを読む、というサイクルを繰り返すと理解が深まります。

プロパティ	役割	典型的な使い方
grid-template-columns	列の定義	repeat(3, 1fr)
grid-template-rows	行の定義	64px auto 48px
gap	セル間余白	16px
grid-column	アイテムの列位置	1 / span 2
grid-row	アイテムの行位置	2 / span 3

---

SEOスコアチェックツール: SEO_CHECK — RINIAディレクターツール。
Web制作・SEO関連の技術情報サイト: CodeQuest.work