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


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

Webサイトのデザイン設計をするとき、「もっと簡単に実装できたら良いのに」と悩んだことはありませんか?Flexboxでは実装しにくかったデザインも、CSSグリッドで簡単に解決できるかもしれません。

この記事では、CSSグリッドの基本的な記述方法・レスポンシブ対応の書き方などを解説しています。構成やプロパティの種類に戸惑うかもしれませんが、書き方は簡単ですのでぜひ覚えてくださいね!

目次
  1. CSSグリッドレイアウトとは?
  2. CSSグリッドの構成
  3. Flexboxとの違い
  4. CSSグリッドレイアウトの書き方
  5. ステップ① グリッドを作成する
  6. ステップ② 行と列を指定する
  7. ステップ③ 子要素のサイズや配置を変更する
  8. レスポンシブ対応
  9. まとめ

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

image

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

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

CSSグリッドの構成

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

  • コンテナ(親要素)
  • アイテム(子要素)

image

  • ライン

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

Flexboxとの違い

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

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

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

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

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

image

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

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

子要素を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;
}

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

image

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

CSS

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

image

余白が空きました!

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

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

image

親要素にサイズを指定して記述します。 画像は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;
}

image

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

image

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

CSS

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

image

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

レスポンシブ対応

image

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

CSS

@media (max-width: 600px){

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

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

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

一流デザイナーのスキルが身に付く

CodeCampの無料体験はこちら

まとめ

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

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


関連記事

高田ナツコ
この記事を書いた人
高田ナツコ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp