CSS Grid入門｜2次元レイアウトの基本と実践

CSS Gridは、行と列の2次元でレイアウトを組むことができるCSSの仕組みです。Webページでよく見るヘッダー・サイドバー・メインコンテンツ・フッターのような複雑な配置も、少ないコードで直感的に実現できます。この記事では、CSS Gridの基本概念から実践的なレイアウトパターンまでを解説します。

CSS Gridとは

CSS Gridは、コンテナを行（row）と列（column）に分割し、その中にアイテムを配置するレイアウトシステムです。FlexboxがA方向のレイアウトに適しているのに対し、Gridは行と列の2方向を同時に制御できます。

GridとFlexboxの使い分け

それぞれ得意な場面が異なります。

Flexbox: ナビゲーションバー、ボタンの横並びなど、1方向のレイアウト
CSS Grid: ページ全体の骨格、カードの格子配置など、2次元のレイアウト

どちらか一方だけを使うのではなく、場面に応じて組み合わせるのが実践的です。

Gridを有効にする

親要素にdisplay: gridを指定するだけでGridコンテナになります。

.container {
  display: grid;
}

列と行を定義する

Gridレイアウトの基本は、grid-template-columnsとgrid-template-rowsで列数と行数を定義することです。

grid-template-columnsの基本

/* 3列のグリッドを作成 */
.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
}

この例では、左右に200pxの固定幅、中央に残りのスペースを使うレイアウトが作れます。1frは「残りのスペースを1等分した分」を意味する単位です。

fr単位で等分する

fr（fraction）は、利用可能なスペースを比率で分配する単位です。

/* 3列を等分 */
.equal-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

/* repeat関数で同じ値を繰り返す */
.equal-3-short {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* 1:2:1の比率で分配 */
.ratio {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

grid-template-rowsで行の高さを指定

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

この例では、1行目が100px固定、2行目が内容に応じた高さ、3行目が60px固定になります。

アイテム間の隙間：gap

gapプロパティでグリッドアイテム間のスペースを指定します。

gapの使い方

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;           /* 行方向・列方向ともに20px */
}

/* 行間と列間で異なる値 */
.container-2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 24px;
  column-gap: 16px;
}

カード配置の基本例

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

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
}

<div class="card-grid">
  <div class="card">カード1</div>
  <div class="card">カード2</div>
  <div class="card">カード3</div>
  <div class="card">カード4</div>
  <div class="card">カード5</div>
  <div class="card">カード6</div>
</div>

6つのカードが3列2行で整然と並びます。

レスポンシブなグリッド

画面幅に応じて列数を自動調整する方法を紹介します。

auto-fillとminmaxの組み合わせ

メディアクエリを使わずにレスポンシブなグリッドを実現する定番パターンです。

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

auto-fill: スペースがある限りトラック（列）を自動で追加する
minmax(250px, 1fr): 各列は最小250px、最大で利用可能なスペースを等分

この1行だけで、画面幅が広いときは4列、狭いときは2列や1列に自動で切り替わるレイアウトが完成します。

auto-fillとauto-fitの違い

/* auto-fill: 空のトラックを残す */
.grid-fill {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* auto-fit: 空のトラックを畳んで残りのアイテムを伸ばす */
.grid-fit {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

アイテム数が少ないときに違いが出ます。auto-fillは空の列スペースを保持しますが、auto-fitはアイテムを引き伸ばして空きスペースを埋めます。

アイテムの配置を指定する

Gridアイテムを特定の位置に配置したり、複数のセルにまたがらせたりすることができます。

grid-columnとgrid-row

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

/* 1列目から3列目までの範囲を占める */
.wide-item {
  grid-column: 1 / 3; /* 1番線から3番線まで */
}

/* 2行にまたがる */
.tall-item {
  grid-row: 1 / 3;
}

/* spanを使った書き方 */
.span-item {
  grid-column: span 2; /* 2列分の幅 */
  grid-row: span 2;    /* 2行分の高さ */
}

ライン番号について

Gridのライン番号は、セルの左端（上端）が1から始まります。3列のグリッドなら、ラインは1、2、3、4の4本あります。

ライン: 1    2    3    4
       |col1|col2|col3|

grid-column: 1 / 3は「ライン1からライン3まで」、つまり2列分を意味します。

テンプレートエリアで視覚的にレイアウト

grid-template-areasを使うと、レイアウトを文字列で視覚的に定義できます。

基本的な使い方

.page-layout {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar main    main"
    "footer  footer  footer";
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: 60px 1fr 40px;
  min-height: 100vh;
  gap: 0;
}

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

<div class="page-layout">
  <header class="header">ヘッダー</header>
  <aside class="sidebar">サイドバー</aside>
  <main class="main">メインコンテンツ</main>
  <footer class="footer">フッター</footer>
</div>

CSSのコードを見るだけで、ページのレイアウト構造が一目でわかります。

メディアクエリとの組み合わせ

テンプレートエリアはメディアクエリと併用すると非常に強力です。

/* モバイル: 1列で縦に積む */
.page-layout {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
  grid-template-columns: 1fr;
}

/* PC: サイドバーを横に配置 */
@media (min-width: 768px) {
  .page-layout {
    grid-template-areas:
      "header  header"
      "sidebar main"
      "footer  footer";
    grid-template-columns: 250px 1fr;
  }
}

テンプレートエリアの文字列を書き換えるだけで、レイアウトの骨格を大きく変えられます。

配置の制御

Gridコンテナとアイテムの配置を制御するプロパティを紹介します。

justify-itemsとalign-items

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

  /* セル内の水平方向の揃え */
  justify-items: center;   /* start | end | center | stretch */

  /* セル内の垂直方向の揃え */
  align-items: center;     /* start | end | center | stretch */
}

placeプロパティのショートハンド

place-itemsはalign-itemsとjustify-itemsのショートハンドです。

/* セル内で上下左右中央揃え */
.container {
  display: grid;
  place-items: center;
}

Flexboxの中央揃えと同様に、Gridでもこの1行だけで中央揃えが実現できます。

まとめ

CSS Gridの基本概念から実践的なレイアウトパターンまでを解説しました。

display: gridとgrid-template-columnsで列を定義する
fr単位でスペースを比率で分配する
gapでアイテム間のスペースを指定する
repeat(auto-fill, minmax())でレスポンシブなグリッドを作れる
grid-columnとgrid-rowでアイテムの配置範囲を指定する
grid-template-areasで視覚的にレイアウトを定義できる
Flexboxと使い分け、場面に応じて組み合わせるのが実践的

CSS Gridは一度覚えると手放せなくなるほど便利な仕組みです。まずはrepeat(auto-fill, minmax())によるカードレイアウトから試してみてください。ブラウザの開発者ツールにはGridの視覚化機能もあるので、活用すると理解が深まります。