CSS Grid入門｜モダンなレイアウトを簡単に実現する方法

CSS Gridは、2次元のレイアウトを簡単に作れるCSSの機能です。

従来はfloatやpositionで苦労していた複雑なレイアウトも、Gridを使えばシンプルなコードで実現できます。

GridとFlexboxの違い

使い分けの基準

特徴	Grid	Flexbox
方向	縦横（2次元）	一方向（1次元）
用途	ページ全体のレイアウト	コンポーネント内の配置
例	ヘッダー＋サイドバー＋メイン	ナビゲーションメニュー、カード内

両方を組み合わせるのがベストプラクティスです。

Gridの基本

親要素に設定

display: gridを指定すると、子要素がグリッドアイテムになります：

.container {
  display: grid;
}

列と行を定義

grid-template-columnsとgrid-template-rowsでグリッドの構造を定義：

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 100px auto 50px;
}

この例では：

列: 200px、残り全部、200px
行: 100px、コンテンツに応じて、50px

fr単位 - 柔軟なサイズ指定

frとは

fr（fraction）は残りのスペースを分配する単位です。

.container {
  grid-template-columns: 1fr 2fr 1fr;
}

この例では、中央の列が左右の2倍の幅になります。

pxとfrの組み合わせ

.container {
  grid-template-columns: 250px 1fr;
}

左の列は固定250px、右の列は残り全部を占有します。

gap - 要素間の余白

gapプロパティ

グリッドアイテム間の余白を設定：

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

行と列で別の値

.container {
  gap: 20px 10px; /* 行間 列間 */
  /* または */
  row-gap: 20px;
  column-gap: 10px;
}

repeat() - 繰り返し

同じ幅の列を複数作る

/* これらは同じ意味 */
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: repeat(4, 1fr);

パターンの繰り返し

grid-template-columns: repeat(3, 100px 200px);
/* → 100px 200px 100px 200px 100px 200px */

アイテムの配置

特定のセルに配置

grid-columnとgrid-rowで位置を指定：

.item {
  grid-column: 2;     /* 2列目 */
  grid-row: 1;        /* 1行目 */
}

複数セルにまたがる

.item {
  grid-column: 1 / 3;  /* 1列目から3列目の前まで（2列分） */
  grid-row: 1 / 4;     /* 1行目から4行目の前まで（3行分） */
}

spanを使う方法

.item {
  grid-column: span 2;  /* 2列分 */
  grid-row: span 3;     /* 3行分 */
}

grid-template-areas - 名前で配置

エリアに名前を付ける

視覚的にわかりやすいレイアウト定義：

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

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

空のセルを作る

ピリオド（.）で空のセルを表現：

grid-template-areas:
  "header header header"
  "sidebar main ."
  "footer footer footer";

レスポンシブ対応

auto-fill と auto-fit

画面幅に応じて列数を自動調整：

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

auto-fill: 空のトラックも作成
auto-fit: 空のトラックを潰してアイテムを広げる

minmax()

最小値と最大値を指定：

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

この例では：

最小200px
余裕があれば均等に広がる
画面幅に応じて列数が変わる

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

.container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: 200px 1fr;
  }
}

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

カードグリッド

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

聖杯レイアウト

ヘッダー、フッター、サイドバー2つ、メインコンテンツ：

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

ダッシュボード

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

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

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

配置の調整

justify-items / align-items

グリッドアイテムのセル内での配置：

.container {
  justify-items: center;  /* 水平方向 */
  align-items: center;    /* 垂直方向 */
}

place-items（ショートハンド）

.container {
  place-items: center;  /* 両方向中央 */
}

個別のアイテムを調整

.item {
  justify-self: end;
  align-self: start;
}

よくあるつまずきポイント

1. はみ出し問題

/* NG: 固定幅がはみ出す */
grid-template-columns: 300px 300px 300px;

/* OK: 最大幅を制限 */
grid-template-columns: repeat(3, minmax(0, 300px));

2. 高さが揃わない

/* アイテムの高さを揃える */
.container {
  align-items: stretch; /* デフォルト値 */
}

3. IEは非対応

Internet Explorerは部分的なサポートのみ。現在は無視してOK。

まとめ

CSS Gridのポイント：

✅ display: gridで有効化
✅ grid-template-columns/rowsで構造定義
✅ fr単位で柔軟なサイズ指定
✅ gapで余白設定
✅ repeat(auto-fit, minmax())でレスポンシブ対応
✅ grid-template-areasで視覚的に配置

FlexboxとGridを使い分けて、モダンなレイアウトを実現しましょう。