Day 4 です。
Flexbox（1 次元）をマスターしたところで、今日は CSS Grid（2 次元） を学びます。
Flexbox は「横一列」を制御するのに適していましたが、Grid は 「縦と横のマス目（碁盤の目）」 を同時に制御します。
🎯 本日の目標
-
display: gridでグリッドレイアウトを開始する。 - 新単位
fr(fraction) を理解する（% 計算が不要になります）。 -
repeat()関数を使って、効率的にマス目を作る。
📝 ミッション内容
今日は、Web サイトでよく見る 「カード型のギャラリー（3 列レイアウト）」 を作ります。
準備: HTML 構造
親要素の中に、アイテムを 6 つ用意します。
<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
Step 1: グリッドの定義と「固定幅」
-
.grid-containerにdisplay: grid;を指定します。 - 続けて、
grid-template-columns: 100px 100px 100px;と書いてみてください。 - 確認: 幅 100px の柱（カラム）が 3 本できましたか？アイテム 4 以降は自動的に次の行（2 行目）に折り返されましたか？
Step 2: 単位「fr」を使う
- 100px だと画面の右側が余ってしまいます。かといって
%で33.33%と書くのは計算が必要です。 -
grid-template-columns: 1fr 1fr 1fr;に書き換えてください。 -
確認: 画面幅いっぱいに、均等に 3 分割されましたか？
-
frは "fraction"（比率/破片）の略です。「1 : 1 : 1」の割合で分ける、という意味になります。
-
Step 3: リピート記法で簡潔に書く
- もし「10 列」作りたい時、
1frを 10 回書くのは大変です。 -
grid-template-columns: repeat(3, 1fr);に書き換えてください。 - 確認: Step 2 と同じ見た目になりますが、コードが簡潔になりました。
Step 4: 溝（Gap）を作る
- アイテム同士がくっついているので離したいですね。Flexbox と同じく
gapが使えます。 -
.grid-containerにgap: 20px;を追加してください。 - 確認: 縦横の隙間が一発で空きましたか？
💻 実装サンプル
正解例
See the Pen CSSマスターへの道「CSS Grid (基礎)」 by サカツ (@saka2jp) on CodePen.
🧠 解説と重要ポイント
1. Flexbox との違い
-
Flexbox: 「中身」ありき。
- 「アイテム A、B、C があるから、これを横に並べよう」というアプローチ。
-
Grid: 「枠（グリッド）」ありき。
- 「ここに 3 列の枠を作る。中身は自動的にそこに配置される」 というアプローチ。
- 今回の例でも、HTML 側のアイテム（
.item）には幅指定などを書いていません。親要素（Container）だけでレイアウトを制御できるのが Grid の特徴です。
2. fr (フラクション) とは
Grid 専用の単位で、「残りの空間の配分比率」を表します。
-
1fr 1fr→ 1:1 で 2 等分。 -
2fr 1fr→ 2:1 で分割（左側が 2 倍の広さになる）。 -
200px 1fr→ 左は 200px 固定、 残りのスペース全部 を右側にする。
3. grid-template-columns
文字通り「グリッドのテンプレート（ひな形）の柱（カラム）」を定義します。
ここに書いた値の数だけ、横に列ができます。
💡 応用：田の字レイアウト（2x2）にするには
3 列ではなく 2 列（2x2）にしたい場合は、CSS をどう書き換えれば良いでしょうか？
grid-template-columns: repeat(2, 1fr); /* 2 回繰り返す */
これだけで、アイテムは自動的に 2 列ごとに改行され、田の字（アイテムが 4 つの場合）や 2 列のリストになります。
おわりに
「親要素に設定を書くだけで、子要素が整列する」という Grid の特性を体感できましたか？
次回は、この Grid を使って、 複雑なエリア分けレイアウト に挑戦します。