本ページはプロモーションが含まれています

【CSS Grid】もうレイアウトで迷わない！初心者でも3分でわかる「グリッドレイアウト」超入門

公開日

Web制作の学習を始めてFlexboxに慣れてくると、次にぶつかる壁が「タイル状の複雑なレイアウト」です。marginの計算に苦労したり、思うように要素が並ばなかったりした経験はありませんか？

そんな悩みを一瞬で解決してくれるのが「CSS Grid（グリッドレイアウト）」です。今回は、初心者の方でも今日から使える基本の3ステップを解説します。

Flexboxとの違い

Flexboxは「横一行（または縦一列）」の並びを得意としますが、Gridは「縦と横の両方」を同時にコントロールできます。パズルをはめ込むようにレイアウトを作れるのが最大の特徴です。

STEP1：親要素を「グリッド」にする

まずは、並べたい要素の親要素に display: grid; と書くだけで準備完了です。これで、その中にある要素を自由に操れる「魔法の方眼紙」が作られます。

STEP2：縦の「列」を決める

次に、何列に分けたいかを決めます。ここで便利なのが fr という単位です。1fr 1fr 1fr と書けば、自動で3等分してくれます。

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3列に等分 */
}

STEP3：隙間（gap）を作る

Gridの最強機能の一つが gap です。これ一行で、要素の間だけに綺麗な余白を作れます。もう margin-right や :last-child の計算で悩む必要はありません。

  1. 親要素に gap: 20px; を追加
    これだけで、縦と横の隙間が一気に整います。
  2. レスポンシブも簡単
    メディアクエリで grid-template-columns: 1fr; に変えるだけで、スマホ用の縦並びに早変わりします。

現役制作者のコツ

実務では、ブログ記事一覧などの「カードレイアウト」にCSS Gridを使うのが定番です。Flexboxよりもコードが短くなり、メンテナンス性も格段に上がりますよ！

まとめ：まずは「3等分」から始めよう

CSS Gridは奥が深いですが、まずは「3等分してgapを空ける」という基本だけで十分実務に使えます。kazoologでは、これからも難しい技術を分かりやすく噛み砕いて発信していきます。

一覧へ!