【CSS Grid】Flexboxとの違いは？「マス目」で考える2次元レイアウト入門

前回まで、Flexboxを使って要素を並べる方法を学びました。
しかし、Flexboxにはひとつだけ「苦手なこと」があります。

それは、「縦と横を同時に揃えること」です。

「写真ギャラリーのように、タイル状に綺麗に敷き詰めたい」
「将棋盤のようなマス目を作りたい」

そんな時に登場するのが、現代CSSの最強機能「CSS Grid（グリッド）」です。
今回は、これを使えるだけでコーディング速度が倍になる、基本の魔法を伝授します。

FlexboxとGrid、何が違うの？
たった2行でグリッドは作れる
1. 1. 魔法の呪文「display: grid;」
2. 2. 列を決める「grid-template-columns」
新単位「fr（フラクション）」を覚えよう
実践：おしゃれな写真ギャラリーを作ろう
1. コードの解説
プロの技：repeat関数
まとめ：使い分けの極意

FlexboxとGrid、何が違うの？

一言で言うと、「線」か「面」かの違いです。

Flexbox（1次元）：
ビーズのネックレスのようなイメージ。
「横一列」か「縦一列」、どちらか一方の流れを作ります。
Grid（2次元）：
田んぼや将棋盤のようなイメージ。
「縦と横」の区切り線を引いて、好きなマス目に要素を置きます。

たった2行でグリッドは作れる

Gridの使い方はシンプルです。
親要素に「Gridモード開始！」と宣言し、「縦割りの設計図」を書くだけです。

1. 魔法の呪文「display: grid;」

.container {
    display: grid; /* GridモードON！ */
}

2. 列を決める「grid-template-columns」

ここが一番のポイントです。
「横にどういう比率で並べるか」を指定します。

.container {
    display: grid;
    /* 100pxの列、200pxの列、100pxの列を作る */
    grid-template-columns: 100px 200px 100px;
}

新単位「fr（フラクション）」を覚えよう

Gridを使うなら、ピクセル(px)やパーセント(%)は忘れてください。
Grid専用の最強単位、「fr」を使います。

fr は「fraction（断片・比率）」の略で、「余ったスペースを山分けする」という意味です。

.container {
    display: grid;
    /* 画面幅を 1:1:1 で3等分する */
    grid-template-columns: 1fr 1fr 1fr;
}

これだけで、計算いらずで完璧な「3等分カラム」が出来上がります。

実践：おしゃれな写真ギャラリーを作ろう

では、Gridの威力を体験してみましょう。
Flexboxだと隙間の計算が面倒だった「タイル型レイアウト」が、嘘みたいに簡単に作れます。

gap プロパティも使って、要素の間に隙間も空けておきましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<style>
    body { font-family: sans-serif; padding: 20px; }

    /* グリッドの親要素 */
    .gallery {
        display: grid;
        /* ★重要：1:1:1 の比率で3列作る */
        grid-template-columns: 1fr 1fr 1fr;
        /* マス目の隙間を20px空ける */
        gap: 20px;
    }

    /* 中身のアイテム（写真の代わり） */
    .photo {
        background-color: #ddd;
        height: 150px; /* 高さを指定 */
        border-radius: 10px;
        display: flex;             /* 文字を真ん中に置くためだけにFlexbox使用 */
        justify-content: center;
        align-items: center;
        font-weight: bold;
        color: #555;
    }

    /* ★スマホ対応（レスポンシブ） */
    @media (max-width: 600px) {
        .gallery {
            /* スマホでは「1列」にする */
            grid-template-columns: 1fr;
        }
    }
</style>
</head>
<body>

    <h1>CSS Grid ギャラリー</h1>

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

</body>
</html>

コードの解説

grid-template-columns: 1fr 1fr 1fr; と書いただけで、アイテムが勝手に折り返して3列に並びましたよね？
Flexboxのように「折り返し設定（flex-wrap）」などは不要です。Gridが勝手にマス目に当てはめてくれるからです。

プロの技：repeat関数

「3列なら 1fr 1fr 1fr でいいけど、10列あったら書くの大変じゃない？」
そう思ったあなたは鋭いです！プロは repeat() 関数を使います。

/* 1fr を 3回繰り返す */
grid-template-columns: repeat(3, 1fr);

意味は 1fr 1fr 1fr と全く同じです。
慣れてきたらこちらを使うとコードがスッキリしますよ。

まとめ：使い分けの極意

最後に、FlexboxとGridの使い分けルールをまとめておきます。

Flexbox：
メニューバー、ボタンの並び、記事の横並びなど、「1列」を制御したい時。
Grid：
写真ギャラリー、Webサイト全体の大きな骨組みなど、「面（エリア）」を制御したい時。

この2つはライバルではありません。「最強のパートナー」です。
大枠をGridで作り、その中の細かいパーツをFlexboxで整える。これが現代のWeb制作の王道スタイルです！