CSSグリッドレイアウトを使いこなそう！使い方やFlexboxとの違いも解説

CSSグリッドレイアウトとは？

CSSグリッドは、2次元レイアウトを簡単に組めるツールのことで、Flexboxと並ぶ便利な機能です。列と行の2つの軸を使ってレイアウトします。Webサイトでよく見る構造を簡単に作成できます。

グリッドとは、水平線と垂直線が交差したもの。細かい単位でアイテムのサイズを指定したり、番号や名前を使って配置を指定したりします。

CSSグリッドの構成

CSSグリッドで使われる用語を簡単にご紹介します。これだけを見ても最初はよくわからないかもしれませんが、解説時に理解しやすくなりますので目を通しておきましょう。

• コンテナ（親要素）
• アイテム（子要素）

• ライン

水平線と垂直線のことをラインと呼びます。それぞれの線から番号が振られていて、値に入力します。

Flexboxとの違い

FlexboxとCSSグリッドの違いは、1次元か2次元かどうかです。これといった使い分けるルールや正解はありませんので、それぞれの特性に合わせて使い分けましょう。

• Flexbox：一方向に並べる　(1次元)
• CSSグリッド：列と行で並べる(2次元)

Flexboxの使い方については、こちらの記事で解説しています。↓

横並びレイアウトはFlexboxで解決！定番プロパティや練習方法を解説

CSSグリッドレイアウトの書き方

今回は、このレイアウトを作成していきます。

ステップ① グリッドを作成する

子要素を6つ用意し、親要素で囲みます。それぞれにクラス名を付けておきましょう。

HTML

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
</div>

CSSでアイテムに背景色などの見た目を設定します。

CSS

.item {
    background: #ddd;
    border: 2px solid #a9a9a9;
    padding: 10px;
    color: #808080;
}

まだそれぞれの子要素にサイズなどの指定をしていないので、見た目に変化はありません。

親要素に display:grid; を指定します。これで下準備は完成！このままでは少し見にくいので、余白を追加しましょう。親要素にgapを指定すると、子要素同士の間に余白を入れられます。

CSS

.container {
    display:grid;
    gap:5px;
}

余白が空きました！

ステップ② 行と列を指定する

行と列を定義するときに必要なプロパティは2つ。grid-template-rows(行)と、grid-template-columns(列)です。

親要素にサイズを指定して記述します。 画像は3列と2行になっているので、 grid-template-columnsは3つの値、grid-template-rowsには2つの値を指定します。

CSS

.container {
    grid-template-columns: 200px 50px 100px;
    grid-template-rows: 100px 50px;
}

ステップ③ 子要素のサイズや配置を変更する

アイテム1を1行目全体に配置したい場合は、grid-columnを使って以下のように記述します。1/4という数字は、グリッドラインの①〜④(※下記画像参照)までを表しています。

CSS

.item1 {
    grid-column: 1 / 4;
}

アイテム1のみを変更した場合は、このような状態です。

続いて、アイテム6のサイズを横に伸ばします。

CSS

.item6 {
    grid-column: 2 / 4;
}

完成です！他のアイテムの配置やサイズを変更して、いろいろ試してみてください。

レスポンシブ対応

スマートフォンサイズで見たときに、すべてのアイテムが1カラムで並ぶように調節します。

CSS

@media (max-width: 600px){

  .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .item {
    grid-column: 1;
    grid-row: auto;
  }
}

数行追加するだけなので簡単ですね！

まとめ

CSSグリッドレイアウトについて解説しました。CSSグリッド特有の構成を理解できれば、あとは簡単です！内容に合わせてFlexboxと使い分けて、表現の幅を広げてみてください。

独学では難しい…と感じたらぜひCodeCampへ！まずは無料体験でプログラミングの面白さを体感してみてくださいね。