CSS Gridでレイアウト

このレッスンでは、CSS Gridを使ったマス目状のレイアウトを学び、Flexboxとの違いを理解して使い分けられるようになることを目標にします。「CSS Grid 使い方」「CSS Grid Flexbox 違い」で調べている方向けです。

display: grid;を使うと、要素をマス目(グリッド)状に配置できます。grid-template-columnsで列の数や幅を指定します。Flexboxが「1方向の並び」なら、Gridは「縦横のマス目」を作るのが得意です。

サンプルコードでは、grid-template-columns: repeat(3, 1fr);という指定で、3列均等幅のグリッドを作り、6つのdivを2行3列に自動配置しています。repeat(3, 1fr)は「同じ幅の列を3つ繰り返す」という意味で、列数の指定を短く書ける便利な書き方です。

初心者がよくつまずくのが、FlexboxとGridのどちらを使うべきかの判断です。「横一列に並べたいだけ」ならFlexbox、「行と列の両方を制御したい」ならGridを選ぶのが基本の目安です。両方同時に使うこともでき、外側の大きな構造はGrid、内側の細かい並びはFlexboxという組み合わせもよく見られます。

雑誌のレイアウトのように、見出し・写真・本文を格子状に配置したいときはGridが向いています。両方を使い分けられるようになると、複雑なページデザインも少ないコードで組み立てられるようになります。

<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .grid div {
    background: #33e6a0;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
  }
</style>

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

OUTPUT / 実行結果

💡 プレビューはこのページ内だけで動作し、外部には送信されません。

🎯

ここまでできればゴール達成!
格子状のレイアウトを、CSS Gridで組めるようになります。