本文へ移動
相談する無料チェックしてみる

トップお知らせ・ブログCSS Gridとは

CSS Gridとは？レイアウトを効率よく作る方法

デザイン・技術読了時間：約3分

商品の一覧や、写真のギャラリーのように、縦と横にきれいにそろえて並べたいときに便利なのが、CSSの「Grid（グリッド）」です。

この記事では、CSS Gridの基本的な書き方と、Flexboxとの使い分けを解説します。

1.Gridは、縦と横のマス目で並べる仕組み

CSS Gridは、箱の中を縦と横のマス目（グリッド）に区切って、要素を配置するためのCSSの仕組みです。並べる側の箱（親）に display: grid を指定して使います。

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

この指定で、.cards の中の要素が、同じ幅の3列に並びます。

2.Gridが便利な理由

Flexboxは一列に並べるのが得意ですが、縦と横の両方をそろえるのは苦手です。Gridは、行と列を同時に決められるため、カードの一覧や、ページ全体のレイアウトを、少ない指定で作れます。

FlexboxGrid
得意なこと一列に並べる縦と横のマス目で並べる
向いている例メニュー、ボタンの並び商品の一覧、ページ全体の枠組み

Gridは、縦と横を同時にそろえたいときに使う仕組みです。

3.よく使う書き方

よく使うプロパティ

プロパティ役割
display: gridGridを使う（親に指定）
grid-template-columns列の数と幅
grid-template-rows行の高さ
gapマス目どうしの間隔
grid-column / grid-row要素を、何列分・何行分にまたがらせるか

fr は、残りの幅を分ける単位です。「1fr 2fr」と書くと、1：2の割合で幅を分けます。

例1：画面の幅に合わせて、列の数を自動で変える

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

1つのカードを240px以上にして、入る数だけ並べます。画面が狭くなると、自動で列が減ります。

例2：スマートフォンでは1列にする

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 600px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

よくあるつまずき

  • display: grid を、並べたい要素（子）に書いてしまう（親に書く）
  • 中の文字や画像が長くて、列の幅が崩れる（minmax(0, 1fr) を使うと防げることがある）
  • スマートフォンで横にはみ出す（列の数を減らす）

4.よくある質問

FlexboxとGridは、一緒に使えますか？

使えます。ページ全体の枠組みはGrid、その中のボタンの並びはFlexbox、のように組み合わせるのが一般的です。

古いブラウザでも使えますか？

今の主なブラウザでは、問題なく使えます。

Gridは難しくないですか？

できることが多いぶん、プロパティも多いですが、まずは grid-template-columns と gap だけでも、多くのレイアウトを作れます。

要素の高さをそろえられますか？

同じ行の要素は、初めの設定で高さがそろいます。カードの一覧で高さをそろえたいときにも便利です。

5.まとめ

CSS Gridは、縦と横のマス目で要素を並べるための仕組みです。縦と横を同時にそろえたいレイアウトに向いています。

  • 並べる側の箱（親）に display: grid を指定する
  • grid-template-columns で列の数と幅を決める
  • repeat(auto-fill, minmax(…)) で、列の数を自動で変えられる
  • 一列の並びはFlexbox、マス目の並びはGridと使い分ける

一列に並べる方法は、CSSのFlexboxとは？で解説しています。

レイアウトの作り方や、崩れの直し方で困っている場合は、浅草Web屋にご相談ください。

相談する

関連記事