Grid: 列、行、エリア

CSS Gridの列、行、名前付きエリアを使って、ギャラリーやページ全体のレイアウトを組み立てましょう。

9 分 · 3 問

Flexboxは1つの軸に沿って揃えますが、Gridは両方を同時に制御します。デザインカンプが表のように見えたら(写真ギャラリー、ダッシュボード、ヘッダー・サイドバー・フッターを備えたページ全体)、Gridが適した道具です。コンテナが列と行で構造を定義し、子要素は自動的に、あるいは選んだとおりの正確な位置に配置されます。

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

fr(fraction、割合)単位は使える空間を分け合います。1fr 2fr は2列を作り、2つ目は幅が2倍になります。パーセントとは違い、fr はあなたが計算しなくても gap を考慮に入れます。ある要素を目立たせるには、grid-column と grid-row で複数のトラックにまたがらせましょう。

.featured {
  grid-column: span 2;
  grid-row: span 2;
}

ページ全体には、grid-template-areas を使えばデザインカンプを直接CSSに描くことができます。各文字列がグリッドの1行を、各単語が名前付きエリアを表します。子要素は grid-area で配置されます。結果は建築家の設計図のように読めます。ページレイアウトにとって最も読みやすい方法です。

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
}

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

理解度チェック

このレッスンの要点をしっかり覚えているか確認しましょう。

1. grid-template-columns: 1fr 2fr において fr 単位は何を表しますか?
   • コンテナの使える空間の割合
   • 画面幅のパーセント
   • ピクセルで表された固定サイズ
2. 均等な幅の3列を作る宣言はどれですか?
   • grid-template-columns: 3
   • grid-template-columns: repeat(3, 1fr)
   • grid-columns: 1fr 3
3. grid-template-areas は何のために使われますか?
   • 子要素が grid-area で配置されるグリッドエリアに名前をつける
   • グリッドの列のサイズを定義する
   • セル間のアニメーションを作る