CSS Grid — 2次元レイアウトの解決策

このトピックを終えると

CSS Gridを使って、行と列ベースのレイアウトを構成する方法を理解できるようになります。

Flexboxだけでは不十分な場合

Flexboxは1次元です。横方向または縦方向のいずれか一方にアイテムを配置します。しかし、ダッシュボードのように、行と列の両方を制御する必要があるレイアウトでは、限界があります。

CSS Gridは2次元レイアウトシステムです。行と列を同時に定義し、アイテムを希望するセルに配置します。

基本的な使い方

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 60px 1fr 40px;
  gap: 16px;
}

3列3行のレイアウトです。1frは、残りのスペースを占めるという意味です（fraction）。左200px、中央は残り、右200px。

fr単位

grid-template-columns: 1fr 2fr 1fr;

残りのスペースを比率で分割します。1:2:1なので、中央の列は両側の2倍の幅になります。pxと組み合わせて使用することもできます。

grid-template-columns: 250px 1fr;

左側は固定の250px、右側は残りのすべて。

repeat — 反復パターン

同じ列を複数回使用する場合：

/* 同じ表現 */
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: repeat(4, 1fr);

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

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

「最小250px、残りのスペースを均等に分割し、スペースが不足した場合は折り返す。」この1行でレスポンシブなカードグリッドが完成します。メディアクエリなしで。

アイテムの配置

特定のアイテムを希望するセルに配置できます：

.header {
  grid-column: 1 / -1; /* 1行目から最後の行まで（全体の幅） */
}

.sidebar {
  grid-row: 2 / 4; /* 2行目から4行目まで（2行を占有） */
}

grid-column: 1 / 3は、1番目の縦線から3番目の縦線まで、つまり2つのセルを占有します。-1は最後の線です。

grid-template-areas — 視覚的な配置

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

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

CSSでレイアウトの形状を絵のように描くことができます。

Grid vs Flexbox

両方とも使用できます。役割が異なります。

Flexbox: 一方向の配置。ナビゲーションバー、ボタングループ、カード内のコンテンツの整列。 Grid: 行と列の両方を同時に制御。ページ全体のレイアウト、ダッシュボード、カードグリッド。

通常、大きなレイアウトはGridで構成し、内部の小さな要素はFlexboxで整列させます。

重要なポイント

CSS Gridは、行と列を同時に制御する2次元レイアウトシステムです。 fr単位で残りのスペースを比率で分割し、repeat(auto-fill, minmax(...))でレスポンシブなグリッドを作成します。 大きなレイアウトはGrid、小さな要素の整列はFlexboxが一般的です。