基本知識

【CSS第7回】Grid Layoutで自由な表組み

CSS基礎講座 全10回（第7回）

【CSS第7回】Grid Layoutで自由な表組み

Flexboxと並ぶ最強のレイアウトシステム「CSS Grid Layout」を学びます。縦・横の2次元グリッドを設定し、美しいグリッド線に沿ってギャラリーやダッシュボード風の配置をミリ単位で表現する技術を習得しましょう。

📌 CSS講座ロードマップ一覧（クリックで移動）

1. CSS Grid LayoutとFlexboxの違い

前回学習したFlexboxは、基本的に「横一列」または「縦一列」といった「1次元（直線的）」の並びを得意としています。

これに対して、Grid Layout (グリッドレイアウト) は、縦と横の「2次元（格子状）」の構造を構築するのに適しています。エクセルの表（セル）のように縦列（Columns）と横行（Rows）をあらかじめ定義し、そのマス目に沿って要素をピタッと綺麗に配置します。

2. 列幅を定義するプロパティとfr単位

Gridを親要素に指定（`display: grid;`）したのち、列数とそれぞれの列幅を決定するために grid-template-columns プロパティを使用します。

この際、CSS Grid独自の非常に便利な相対単位である `fr`（fraction = 分数、割合） を使用します。

💡 割合指定（fr）のメリット

・grid-template-columns: 1fr 1fr 1fr; と記述すると、親要素の横幅を「1:1:1」で均等に3分割した3カラムレイアウトが瞬時に完成します。
・面倒なパーセント（%）計算やピクセルでの余り計算をブラウザが全自動で行ってくれるため、画面サイズが変わっても表示崩れを起こしません。

📌 repeat()関数を使ったスマートな記述

「等幅で3分割」といった指定を短縮して書くために、repeat(列数, 幅) という記法が使えます。
例: grid-template-columns: repeat(3, 1fr); ➔ 等幅で3カラムを作成する

3. 余白をミリ単位で調整する gap

要素と要素の隙間を作る際、従来の `margin` を使って「右側と下側にだけ余白を指定して、一番端の要素だけリセットする」といった面倒な指定は不要です。

CSS Grid（および最近のFlexbox）では、親要素に対して `gap: 20px;` を指定するだけで、要素の「あいだ（隙間）」だけに全自動で20pxの余白を設けることができます。外側の枠からはみ出すことなく、完璧な余白設計が実現します。

4. タイル型のギャラリーを配置してみよう

以下のCSSを指定すると、子要素がどれだけ増えても、全自動で3列に整列されて折り返していく美しいレスポンシブ対応カードリストが作成できます。

style.css 
.grid-wrapper {
    display: grid;                       /* 親をグリッド化 */
    grid-template-columns: repeat(3, 1fr); /* 等幅で3列を定義 */
    gap: 24px;                            /* アイテム同士の隙間を24pxに */
}

.grid-item-card {
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    padding: 20px;
    border-radius: 8px;
}
✍️ 第7回 理解度チェック（問題）

Grid Layoutにおいて、親の横幅を3等分（1:1:1）にした列を定義するために、grid-template-columnsプロパティに指定するrepeat関数を用いた最もシンプルな値は何でしょうか？

※この問題の解答と解説は、ページ最下部（まとめの前）に掲載しています。

5. まとめと次回予告

第7回の講義はお疲れ様でした！今回の重要ポイントを振り返りましょう。

  • Grid Layoutは縦横2次元（マス目状）の直観的なレイアウトシステム。
  • `grid-template-columns` で列数と幅を、割合単位 `fr` や `repeat()` 関数を使って定義する。
  • `gap` プロパティを使うことで、子要素の間（隙間）だけに一括で余白を作ることができる。

次回（第8回）は、マルチデバイス対応のための必須の技術である「レスポンシブ対応とメディアクエリ」を学び、PC・スマートフォンの表示を美しく切り替える方法を修得します。お楽しみに！

📖 CSSの基礎を全10回でマスターする

🔑 第7回 理解度チェックの解答と解説

【解説】

正解は **`repeat(3, 1fr)`** です。 `repeat(3, 1fr)` は、均等な分割割合を意味する `1fr` という指定を `3回繰り返す`（すなわち `1fr 1fr 1fr` と同じ）という定義になります。Grid Layoutではこの fr と repeat() の組み合わせを使うことで、あらゆるレスポンシブ対応のカラム構造を驚くほどシンプルに書き上げることができます。

関連記事