CSS Grid を使ってレイアウトを作成するにはどうすればよいですか？

Question

IT Interview Practice · Accepted Answer

**CSS Grid** は二次元のレイアウトシステムであり、Flexbox の単一の軸とは異なり、**行と列を同時に**制御します。コンテナにグリッドを定義し、その中にアイテムを配置します。

```css
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr; /* 3 columns: fixed, then two flexible */
  grid-template-rows: auto 1fr auto;     /* 3 rows */
  gap: 1rem;                              /* gutters between cells */
}
```

## fr 単位と repeat()

```css
grid-template-columns: repeat(3, 1fr);   /* 3 equal columns */
grid-template-columns: 1fr 2fr;          /* 2nd column is twice the 1st */
```

`fr`（"fraction"）は利用可能なスペースを分配します。`1fr 2fr` はそれを 1:2 で分割します。`repeat(3, 1fr)` は等しい 3 つのトラックの省略記法です。

## メディアクエリを使わないレスポンシブグリッド

```css
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
```

この 1 行で完全にレスポンシブなカードグリッドが作成されます。各列は少なくとも `250px` あり、ブラウザは 1 行あたり**できるだけ多く**収め、残りを折り返します。デスクトップの 4 列からモバイルの 1 列まで自動的に変化します。`auto-fit` と `minmax` の組み合わせは、Grid の最も愛されているパターンの 1 つです。

## セルをまたいでアイテムを配置する

```css
.hero {
  grid-column: 1 / 3;  /* span from column line 1 to 3 (two columns) */
  grid-row: 1 / 2;
}
.featured { grid-column: span 2; } /* span 2 columns from its position */
```

アイテムは複数の行や列にまたがることができ、Flexbox では扱いにくい雑誌のようなレイアウトを実現できます。

## Grid と Flexbox

- **Grid** — 二次元レイアウト（行*かつ*列）: ページレイアウト、カードグリッド、ダッシュボード。
- **Flexbox** — 一次元レイアウト（単一の行または列）: ナビバー、ボタングループ、中央揃え。

これらは相性が良く、グリッドのセル自体が flex コンテナになることもできます。

## なぜ重要なのか

Grid は最も強力な CSS レイアウトツールであり、ページ全体のレイアウトやレスポンシブなカードグリッドをきれいに処理し、ネストした div のハックを置き換えることがよくあります。

`auto-fit`/`minmax` のレスポンシブパターンだけでも、多くのメディアクエリの必要性をなくしてくれます。

fr 単位と repeat()

メディアクエリを使わないレスポンシブグリッド

セルをまたいでアイテムを配置する

Grid と Flexbox

なぜ重要なのか

関連する質問