Documentation CSS

この記事で学べること

  • CSS Gridの基本概念と用語（グリッドコンテナ、グリッドアイテム、トラック、セル、ライン）
  • グリッドを定義するための主要プロパティ（grid-template-columns、grid-template-rows）
  • アイテムの配置方法（grid-column、grid-row、grid-area）
  • 便利な関数（repeat、minmax、auto-fill、auto-fit）
  • 実践的なレイアウトパターンの実装
  • FlexboxとGridの適切な使い分け

概要

CSS Grid（グリッドレイアウト）は、Webページのレイアウトを2次元（行と列）で構築するためのCSSモジュールです。従来のfloatやFlexboxでは難しかった複雑なレイアウトを、より直感的かつ効率的に実現できます。

CSS Gridを使用することで、以下のようなメリットがあります。

  • 2次元レイアウト: 行と列の両方を同時に制御できる
  • 宣言的なコード: どのような見た目にするかを明確に記述できる
  • レスポンシブ対応: メディアクエリなしでも柔軟なレイアウトが可能
  • コード量の削減: 従来の方法より少ないCSSで複雑なレイアウトを実現

CSS Gridの基本用語

Gridを理解するためには、まず基本的な用語を押さえておく必要があります。

グリッドコンテナとグリッドアイテム

<!-- グリッドコンテナ: display: gridを指定した親要素 -->
<div class="grid-container">
  <!-- グリッドアイテム: コンテナの直接の子要素 -->
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>
/* グリッドコンテナの基本設定 */
.grid-container {
  display: grid; /* これでグリッドコンテナになる */
}

グリッドの構成要素

用語説明
グリッドライングリッドを構成する水平・垂直の線。番号または名前で参照できる
グリッドトラック2本の隣接するグリッドラインの間のスペース（行または列）
グリッドセル4本のグリッドラインで囲まれた最小単位
グリッドエリア1つ以上のグリッドセルで構成される長方形の領域

グリッドの定義

grid-template-columnsとgrid-template-rows

グリッドの列と行のサイズを定義する基本プロパティです。

.container {
  display: grid;
  /* 3列のグリッド: 各列100pxの固定幅 */
  grid-template-columns: 100px 100px 100px;
  /* 2行のグリッド: 各行50pxの固定高さ */
  grid-template-rows: 50px 50px;
}

さまざまなサイズ指定方法

/* 固定値（px） */
grid-template-columns: 200px 300px 100px;

/* パーセンテージ（%） */
grid-template-columns: 25% 50% 25%;

/* fr単位（fraction: 残りスペースの分割） */
grid-template-columns: 1fr 2fr 1fr; /* 1:2:1の比率 */

/* 組み合わせ */
grid-template-columns: 200px 1fr 200px; /* 両端固定、中央は可変 */

/* auto（コンテンツに合わせる） */
grid-template-columns: auto 1fr auto;

fr単位の詳細

fr単位（fraction）は、利用可能なスペースを割合で分割する単位です。固定サイズの要素を除いた残りのスペースを分配します。

.container {
  display: grid;
  width: 800px;
  /* 200px固定 + 残り600pxを1:2で分割（200px, 400px） */
  grid-template-columns: 200px 1fr 2fr;
}

repeat()関数

同じサイズのトラックを繰り返し定義する場合、repeat()関数が便利です。

/* Before: 冗長な記述 */
grid-template-columns: 1fr 1fr 1fr 1fr;

/* After: repeat()を使用 */
grid-template-columns: repeat(4, 1fr); /* 4列、各1fr */

repeat()のパターン

/* 単純な繰り返し */
grid-template-columns: repeat(3, 100px); /* 100px 100px 100px */

/* パターンの繰り返し */
grid-template-columns: repeat(2, 1fr 2fr); /* 1fr 2fr 1fr 2fr */

/* 他の値との組み合わせ */
grid-template-columns: 200px repeat(3, 1fr) 200px;

minmax()関数

トラックの最小値と最大値を指定できる関数です。レスポンシブデザインに非常に便利です。

.container {
  display: grid;
  /* 各列は最小200px、最大1frまで広がる */
  grid-template-columns: repeat(3, minmax(200px, 1fr));
}

minmax()の使用例

/* 最小100px、最大auto（コンテンツに応じて拡大） */
grid-template-columns: minmax(100px, auto) 1fr;

/* 最小0、最大200px（200pxを超えない） */
grid-template-columns: 1fr minmax(0, 200px);

/* サイドバー + メインコンテンツのレイアウト */
grid-template-columns: minmax(200px, 300px) 1fr;

auto-fillとauto-fit

コンテナの幅に応じて自動的に列数を調整する、レスポンシブグリッドの要となる機能です。

auto-fill

コンテナに収まる限り、トラックを繰り返し生成します。空のトラックも維持されます。

.container {
  display: grid;
  /* 最小200pxの列をコンテナに収まる限り生成 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

auto-fit

auto-fillと似ていますが、空のトラックは折りたたまれ、アイテムがスペースを埋めます。

.container {
  display: grid;
  /* アイテムがスペースを埋める */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

auto-fillとauto-fitの違い

<div class="grid-auto-fill">
  <div>1</div>
  <div>2</div>
</div>

<div class="grid-auto-fit">
  <div>1</div>
  <div>2</div>
</div>
.grid-auto-fill {
  display: grid;
  /* 空のトラックが残る（アイテムは左寄せ） */
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.grid-auto-fit {
  display: grid;
  /* 空のトラックが折りたたまれる（アイテムが広がる） */
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

アイテムの配置

grid-columnとgrid-row

グリッドアイテムをどのラインからどのラインまで配置するかを指定します。

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

配置の省略記法

/* 開始ライン / 終了ライン */
grid-column: 1 / 3;

/* spanを使用（何トラック分かを指定） */
grid-column: 1 / span 2; /* ライン1から2トラック分 */
grid-column: span 2;      /* 現在位置から2トラック分 */

/* 終了ラインのみ指定（1トラックを暗黙指定） */
grid-column: 2;           /* ライン2から1トラック分 */

/* 負の値（最後から数える） */
grid-column: 1 / -1;      /* 最初から最後まで */

grid-area

grid-row-start、grid-column-start、grid-row-end、grid-column-endを一括指定します。

.item {
  /* 行開始 / 列開始 / 行終了 / 列終了 */
  grid-area: 1 / 1 / 3 / 4;
}

名前付きグリッドライン

ラインに名前を付けると、配置がより直感的になります。

.container {
  display: grid;
  grid-template-columns:
    [sidebar-start] 200px
    [sidebar-end main-start] 1fr
    [main-end];
  grid-template-rows:
    [header-start] 80px
    [header-end content-start] 1fr
    [content-end footer-start] 60px
    [footer-end];
}

.header {
  grid-column: sidebar-start / main-end;
  grid-row: header-start / header-end;
}

.sidebar {
  grid-column: sidebar-start / sidebar-end;
  grid-row: content-start / content-end;
}

.main {
  grid-column: main-start / main-end;
  grid-row: content-start / content-end;
}

grid-template-areas

視覚的にレイアウトを定義できる強力なプロパティです。

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 80px 1fr 60px;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
}

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

grid-template-areasのルール

/* 空のセルはピリオド（.）で表す */
grid-template-areas:
  "header header header"
  "sidebar main ."
  "footer footer footer";

/* 各エリアは長方形でなければならない */
/* NG: L字型やT字型は不可 */

gapプロパティ

グリッドアイテム間の間隔を設定します。

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

  /* 行と列の間隔を同時に指定 */
  gap: 20px;

  /* 行と列を別々に指定 */
  gap: 20px 30px; /* 行間 列間 */

  /* 個別プロパティ */
  row-gap: 20px;
  column-gap: 30px;
}

アイテムの整列

justify-items / align-items

グリッドセル内でのアイテムの配置を制御します。

.container {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(2, 150px);

  /* 水平方向（インライン軸）の配置 */
  justify-items: start;   /* 左寄せ */
  justify-items: end;     /* 右寄せ */
  justify-items: center;  /* 中央 */
  justify-items: stretch; /* 伸張（デフォルト） */

  /* 垂直方向（ブロック軸）の配置 */
  align-items: start;     /* 上寄せ */
  align-items: end;       /* 下寄せ */
  align-items: center;    /* 中央 */
  align-items: stretch;   /* 伸張（デフォルト） */
}

place-items（省略記法）

.container {
  /* align-items justify-items の順 */
  place-items: center center;
  place-items: center; /* 両方とも center */
}

justify-content / align-content

グリッド全体をコンテナ内でどう配置するかを制御します。

.container {
  display: grid;
  width: 800px;
  height: 600px;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);

  /* 水平方向のグリッド配置 */
  justify-content: start;         /* 左寄せ */
  justify-content: end;           /* 右寄せ */
  justify-content: center;        /* 中央 */
  justify-content: space-between; /* 両端揃え */
  justify-content: space-around;  /* 均等配置 */
  justify-content: space-evenly;  /* 完全均等 */

  /* 垂直方向のグリッド配置 */
  align-content: start;
  align-content: end;
  align-content: center;
  align-content: space-between;
  align-content: space-around;
  align-content: space-evenly;
}

justify-self / align-self

個別のアイテムの配置を上書きします。

.special-item {
  justify-self: center; /* このアイテムだけ水平中央 */
  align-self: end;      /* このアイテムだけ下寄せ */
}

暗黙的グリッド

定義したグリッドに収まらないアイテムは、自動的に新しいトラックが作成されます。

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

  /* 暗黙的に作成される行のサイズ */
  grid-auto-rows: 150px;

  /* 暗黙的に作成される列のサイズ */
  grid-auto-columns: 100px;
}

grid-auto-flow

アイテムの自動配置アルゴリズムを制御します。

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

  /* row: 行方向に配置（デフォルト） */
  grid-auto-flow: row;

  /* column: 列方向に配置 */
  grid-auto-flow: column;

  /* dense: 空きスペースを埋める */
  grid-auto-flow: row dense;
}

実践的なレイアウトパターン

基本的な12カラムグリッド

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

.col-4 { grid-column: span 4; }  /* 4カラム分 */
.col-6 { grid-column: span 6; }  /* 6カラム分 */
.col-8 { grid-column: span 8; }  /* 8カラム分 */
.col-12 { grid-column: span 12; } /* 全幅 */

Holy Grailレイアウト

ヘッダー、フッター、サイドバー2つ、メインコンテンツの古典的なレイアウトです。

.holy-grail {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
}

.header { grid-area: header; background: #333; color: white; padding: 1rem; }
.nav    { grid-area: nav; background: #f0f0f0; padding: 1rem; }
.main   { grid-area: main; padding: 1rem; }
.aside  { grid-area: aside; background: #f0f0f0; padding: 1rem; }
.footer { grid-area: footer; background: #333; color: white; padding: 1rem; }
<div class="holy-grail">
  <header class="header">Header</header>
  <nav class="nav">Navigation</nav>
  <main class="main">Main Content</main>
  <aside class="aside">Sidebar</aside>
  <footer class="footer">Footer</footer>
</div>

レスポンシブカードグリッド

メディアクエリなしで自動的にカラム数が調整されるカードグリッドです。

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  padding: 24px;
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}
<div class="card-grid">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
  <div class="card">Card 5</div>
  <div class="card">Card 6</div>
</div>

画像ギャラリー（Masonryライク）

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 10px;
  gap: 10px;
}

.gallery-item {
  border-radius: 8px;
  overflow: hidden;
}

/* アイテムごとにスパンを調整 */
.gallery-item.tall { grid-row: span 20; }
.gallery-item.medium { grid-row: span 15; }
.gallery-item.short { grid-row: span 10; }

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

ダッシュボードレイアウト

.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  min-height: 100vh;
}

.dashboard-header {
  grid-area: header;
  background: white;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  padding: 0 24px;
}

.dashboard-sidebar {
  grid-area: sidebar;
  background: #1a1a2e;
  color: white;
  padding: 20px;
}

.dashboard-main {
  grid-area: main;
  padding: 24px;
  background: #f5f5f5;

  /* メインエリア内のグリッド */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  align-content: start;
}

.widget {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.widget.large {
  grid-column: span 2;
}

FlexboxとGridの使い分け

Gridが適している場面

  • ページ全体のレイアウト
  • 2次元のレイアウト（行と列の両方を制御）
  • 複雑で規則的なグリッド構造
  • 要素のサイズを親から制御したい場合

Flexboxが適している場面

  • 1次元のレイアウト（行または列の一方向）
  • コンポーネント内の小さなレイアウト
  • コンテンツのサイズに基づいた配置
  • アイテムの順序変更や等間隔配置

組み合わせて使う例

/* ページ全体: Grid */
.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

/* ヘッダー内のナビゲーション: Flexbox */
.header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

/* カードグリッド: Grid */
.main {
  grid-area: main;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

/* カード内のレイアウト: Flexbox */
.card {
  display: flex;
  flex-direction: column;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
}

ブラウザサポートと注意点

ブラウザサポート

2024年現在、CSS Gridは以下のブラウザでサポートされています。

ブラウザサポートバージョン
Chrome57以降
Firefox52以降
Safari10.1以降
Edge16以降
Opera44以降

注意点

  1. サブグリッド（subgrid）: 比較的新しい機能のため、ブラウザサポートを確認してください
  2. IE11: CSS Gridは部分的にしかサポートされていません（-ms-プレフィックスが必要）
  3. フォールバック: 古いブラウザ向けにはFlexboxやfloatでのフォールバックを検討してください
/* フォールバックの例 */
.container {
  display: flex;
  flex-wrap: wrap;
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

まとめ

CSS Gridは、Webページのレイアウトを構築するための強力で直感的なツールです。本記事で学んだポイントを振り返りましょう。

主要プロパティの一覧

プロパティ説明
display: gridグリッドコンテナを作成
grid-template-columns列のサイズと数を定義
grid-template-rows行のサイズと数を定義
grid-template-areas名前付きエリアでレイアウト定義
gapアイテム間の間隔
grid-columnアイテムの列方向の配置
grid-rowアイテムの行方向の配置
grid-areaアイテムのエリア配置
justify-items / align-itemsセル内でのアイテム配置
justify-content / align-contentグリッド全体の配置

便利な関数と値

関数/値説明
fr残りスペースの分割単位
repeat()トラックの繰り返し定義
minmax()最小・最大サイズの指定
auto-fillコンテナに収まる限りトラックを生成
auto-fit空のトラックを折りたたむ

CSS Gridをマスターすることで、複雑なレイアウトも少ないコードで実現でき、保守性の高いCSSを書くことができます。実際のプロジェクトで積極的に活用してみてください。

参考文献

円