このlessonをすべて読み終えたら、以下の3つを自信を持ってできるようになります。

• ▸✅ grid-template-columns: repeat(auto-fit, minmax()) パターン
• ▸✅ grid-area と名前付きラインによる12カラムレイアウト
• ▸✅ FlexとGridの使い分け

学習目標をチェックリストとして手元に置き、すべて答えられるようになったらlessonを閉じてください。

核心の一言

CSS Grid = 行と列（2次元） でレイアウトを組み立てるツール。Flexboxが1方向の整列なら、Gridは将棋盤のような格子構造。

Gridを使う場面

• ▸カードグリッド（3列4行）
• ▸ページ全体のレイアウト（ヘッダー・サイドバー・メイン・フッター）
• ▸雑誌や新聞のような複雑なレイアウト
• ▸テーブル（tableよりも柔軟）

1方向の整列はFlexbox、2次元はGrid。両者は共存します。

基本的な使い方

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;   /* 3列、同じ幅 */
    gap: 16px;
}

<div class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

3列グリッド、2行に自動配置。

fr — フラクショナルユニット

grid-template-columns: 1fr 2fr 1fr;
/* 1:2:1の比率 — 中央が2倍 */

fr = 残りスペースの1単位。ピクセルではなく比率。画面サイズが変わっても比率を維持します。

repeat — 繰り返しの省略記法

grid-template-columns: repeat(4, 1fr);
/* = 1fr 1fr 1fr 1fr */

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* 最小200px、可能な限り自動配置 */

auto-fill + minmax がレスポンシブグリッドの魔法 — 画面の幅に応じて1列・2列・3列...と自動で調整されます。

エリアの名前指定

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

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

レイアウトが目に浮かびます。ページ全体の構造を表現するのに圧倒的に便利。

グリッドアイテムの個別配置

.featured {
    grid-column: 1 / 4;     /* 1番ライン ~ 4番ライン (3マス占有) */
    grid-row: 1 / 3;        /* 1番ライン ~ 3番ライン (2行占有) */
}

特定のカードをより大きく見せたいときに使います。このような不規則なレイアウトはFlexboxでは難しいです。

Flexbox vs Grid

ほとんどの場合、両方を組み合わせて使います。大きなレイアウトにはGrid、その中の小さなコンポーネントにはFlexbox。

まとめ

• ▸display: grid + grid-template-columns + gap から始める
• ▸repeat(auto-fill, minmax(200px, 1fr)) = レスポンシブカードグリッド
• ▸grid-template-areas でページ全体のレイアウト
• ▸Flexboxと組み合わせて使う

このlessonの概念を理解すれば、AIに具体的に指示できます。漠然とした「直して」ではなく、語彙を持ったリクエスト — それがトークン節約の出発点です。

• ▸「このカードリストを grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) で作って」
• ▸「この12カラムレイアウトをCSS Gridに変換して」
• ▸「このgridにgapと明示的なarea配置を追加して」

なぜトークンが減るのか

概念を知らないと、AIの回答を受け取っても「それって何ですか？」と再度聞かなければなりません。その「再質問」がトークンを消費します。概念を一度身につければ、会話が一度で完結します。