CSS Gridグリッドレイアウト display: gridの使い方

本記事は広告が含まれる場合があります CSS

【CSS グリッドレイアウト】display: gridの使い方

今回はCSSのグリッドレイアウト(display: grid)の使い方を解説していきます。

グリッドレイアウトを利用すると、要素を格子状に並べて自由に配置することができるので、レイアウトを組むのにとても便利です。

プロパティ解説用のデモ
 

 




 

CSSグリッドレイアウト(display: grid)とは?

Grid Layout(display: grid)は、CSSでレイアウトを組む手法の1つで、要素を格子状に並べて配置することができます。

Grid Layoutでは列数と行数をあらかじめ指定し、水平線と垂直線が交差してできたエリアにアイテムを配置していくことでレイアウトを組んでいきます。

■(参考)列数を3、行数を4と指定し、1番左上のエリアにアイテムを配置させている例

グリッドレイアウトの設定イメージ
 

「display: grid」が指定された要素をグリッドコンテナ、その子要素となる要素をグリッドアイテムと呼びます。
グリッドコンテナとグリッドアイテムについての説明図
 

 
なお、列数と行数の指定はアイテム全体を囲った親要素に対して「display: grid」を指定した後、「grid-template-columns」「grid-template-rows」プロパティを指定することで可能です。

親要素(グリッドコンテナ)に対して設定 display:grid(必須) グリッドレイアウトを作成する(グリッドコンテナを作成する)
grid-template-columns(実質必須) グリッドコンテナの列数や各グリッドのサイズを設定する
grid-template-rows(実質必須) グリッドコンテナの行数や各グリッドのサイズを設定する
gap グリッドアイテム同士の隙間を設定する
子要素(グリッドアイテム)に対して設定 grid-column(実質必須) グリッドアイテムの横方向の位置を指定する
grid-row(実質必須) グリッドアイテムの縦方向の位置を指定する

 

■(参考)display: gridのブラウザ対応状況

2022年7月現在、display: gridはIE(Internet Explorer)を除くほとんどの主要ブラウザに対応しています。

display: gridのブラウザ対応状況

 

グリッドレイアウト(display: grid)の使い方

それではグリッドレイアウト(display: grid)の使い方を紹介していきます。グリッドレイアウトを使ってレイアウトを組むには以下の手順を踏む必要があります。

■グリッドレイアウト(display: grid)を使ってレイアウトを組む手順

  • STEP. 1:display: gridを指定して、グリッドコンテナを作成する
  • STEP. 2:grid-template-columns(rows)を指定して、グリッドコンテナの列数、行数を決める
  • STEP. 3:グリッドアイテムをどのエリアに配置するかを決める

 

display:grid設定前の事前準備

今回は以下のようなコードを準備しました。このコードを元にdisplay:gridの使い方を説明していきます。

グリッドレイアウトを解説するために作成したデモ

これをグリッドレイアウトを使って以下のようなレイアウトを実装していくことにします。

グリッドレイアウトを使って作成するレイアウトデモ

 

STEP. 1:display: gridを指定してグリッドコンテナを作成する

それではまずSTEP. 1では、display: gridを指定してグリッドコンテナを作成しましょう。

今回は「grid-container」というクラス名がついたdivタグをグリッドコンテナにしてあげたいので、こちらに「display: grid」を指定します。

これで見た目は変わりませんが、1列5行のグリッドコンテナが作成されました。

1列5行のグリッドコンテナが作成された

 

STEP. 2:グリッドコンテナの列数、行数を決める

次に、グリッドコンテナの列数(grid-template-columns)および行数(grid-template-rows)で定義します。
 

grid-template-columns グリッドコンテナの列数や各グリッドのサイズを設定する
grid-template-rows グリッドコンテナの行数や各グリッドのサイズを設定する

「grid-template-columns」「grid-template-rows」プロパティには、半角スペースを挟んで値を複数指定することができ、こうすることでcolumnsであれば左から順番に、rowsであれば上から順番に列幅や行幅のサイズを指定することが可能です。

 grid-template-columnsと grid-template-rowsの指定方法

今回は4列2行で、各幅や高さのサイズを100pxにしたいので、以下のように指定します。

4列2行のグリッドコンテナ

これで上の画像のようになったはずです。

(参考) 同じ値を繰り返す際はrepeat関数が使用できる

なおgrid-template-columnsやgrid-template-rowsを指定する際に、同じ値を繰り返す際はrepeat関数を使用して、左の値に繰り返す回数、右の値に繰り返す値を書いてあげることで、より効率的に指定することもできます。

4列2行のグリッドコンテナ

こういった便利な書き方も覚えておくと良いでしょう。

 

STEP. 3:グリッドアイテムをどのエリアに配置するかを決める

最後に、グリッドアイテムをどのエリアに配置するかを指定しましょう。

STEP.2で列数を4、行数を2にすることができたので、グリッドコンテナ内に合計8つのエリア(グリッド)ができています。

グリッドエリアが8つできている

この8つのエリアのうち1、2、5、6番目のエリアに「Grid Item1」を配置したいのですが、グリッドアイテムを用意したどこのエリアに配置するかを決めるには、グリッドアイテムに対して「grid-column」「grid-row」プロパティを指定してあげればOKです。

grid-column グリッドアイテムの横方向の位置を指定する
grid-row グリッドアイテムの縦方向の位置を指定する

なお、指定には各垂直線や水平線に割り当てられた数字を用いて、どの領域に配置したいかを指定してあげます。

各垂直線や水平線に割り当てられた数字を用いて、どの領域にグリッドアイテムを配置したいかを指定

グリッドレイアウトデモの完成例

これで正解例のようにすることができました。

grid-columnやgrid-rowが指定されていないグリッドアイテムに関しては、デフォルトで左上のグリッドから右方向へ順番に表示されるようになっています。

grid-columnやgrid-rowが指定されていないグリッドアイテムに関しては、デフォルトで左上のグリッドから右方向へ順番に表示される

 

補足:gridで使用できる単位「fr」について

なお補足ですが、グリッドレイアウトでは「fr」という単位が使用できます。

この値はgrid-template-coulumnsやgrid-template-rowsで使用することができ、display: gridを指定した要素の未指定の横幅をfrの合計値で割った幅が1frと計算されます。

frを使用して全グリッドアイテムの横幅を指定している例

上の例では「grid-template-columns :1fr 2fr 1fr」を指定しているため、1列目から順番に「グリッドコンテナの横幅 × 1 / (1 + 2 + 1)」「グリッドコンテナの横幅 × 2 / (1 + 2 + 1)」「グリッドコンテナの横幅 × 1 / (1 + 2 + 1)」の横幅になっています。

また、以下のように値の一部に固定値が入っている場合は、まずは固定値分の値がグリッドコンテナの横幅全体から引かれてから、残りのスペースにfrの比率が割り当てられます。

一部のグリッドアイテムには固定値、残りのアイテムにはfrを使って横幅を指定している例

 




 

gridで使用できるその他オプションCSS

ここまででグリッドレイアウト(display: grid)の基本的な使い方を紹介しましたが、ここからは知っておくと便利なgridで使用できるプロパティをいくつか紹介していきます。

親要素(グリッドコンテナ)に対して設定 grid-template-areas 各グリッドエリアに名前を設定する
gap グリッド間に余白を作る
justify-content コンテナ内におけるグリッドの横方向の位置を変更する
grid-auto-flow グリッドアイテムの配置方向を変更する
grid-auto-rows / grid-auto-columns: 暗黙的なグリッドの行、列サイズを指定する
子要素(グリッドアイテム)に対して設定 grid-area グリッドアイテムをどのエリアに配置するか指定する
order グリッドアイテムの表示順を変更する

 
なお、解説には以下のデモコードを使用していきます。

プロパティ解説用のデモ

 

 grid-template-areas:各グリッドに名前をつける

1つ目は、grid-template-areasプロパティです。

こちらのプロパティを使用することで、作成された各グリッドに名前をつけることができ、この名前を使用してグリッドアイテムの配置を自由に指定することができます。

grid-template-areasの使用例

また、名前を指定してグリッドアイテムの配置を指定する際は「grid-area: 任意の名前」と記述します。

grid-template-areasを使用してアイテムの順番を変更している例

今回は各グリッドに異なる名前を指定していますが、隣接するグリッドに同じ名前を指定してもOKです。

 

order:グリッドアイテムの表示順を変更する

2つ目は、orderプロパティです。

orderプロパティでは、以下のように値として数値を指定することで、小さい値が指定されたアイテムから順番に表示されていきます。(初期値は0)

orderを使用してアイテムの順番を変更している例

 

gap:グリッド間に余白を作る

3つ目は、gapプロパティです。

gapプロパティはグリッドコンテナに指定することで、グリッド間に余白を作ることができます。

gapを使用してグリッド間に余白をとっている例

またgapプロパティには半角スペースを開けて値を2つ指定することもでき、縦方向の余白は先に指定した値、横方向の余白は後に指定した値が適用されます。

gapに値を2つ指定して縦横方向に異なる余白をとっている例

 

justify-content:コンテナ内におけるグリッドの横方向の位置を変更する

4つ目は、justify-contentプロパティです。

こちらは指定することで、コンテナ内におけるグリッドの横方向の位置を変更することができます。

justify-content: centerを指定している例

上の例では「center」という値を指定していますが、他にもjustify-contentプロパティでは以下の値が使用できます。

■(参考)justify-contentで指定できる値

stretch(初期値) 各アイテムを均等に配置し、「auto」が設定されているアイテムは、コンテナに合わせて引き伸ばされる
start アイテムをコンテナ先頭に寄せる
center アイテムをコンテナ中央に寄せる
end アイテムをコンテナ末尾に寄せる
space-between 各アイテムを均等に配置し、最初のアイテムはコンテナ先頭、 最後のアイテムはコンテナ末尾に寄せる
space-around 各アイテムを均等に配置し、各アイテムの両側にのみ半分の大きさの余白を取る
space-evenly  各アイテムを均等に配置し、各アイテムの周りに均等な余白を取る

 

grid-auto-flow:グリッドアイテムの配置方向を変更する

5つ目は、grid-auto-flowプロパティです。

こちらは、指定することでグリッドアイテムの配置方向を変更することができます。

前述したように、グリッドアイテムはデフォルトでは左上のグリッドから右方向へ順番に表示されるようになっています。

デフォルトのグリッドアイテムの配置方向

これを左上のグリッドから下方向へ順番に表示されるようにしたい場合は「grid-auto-flow: column」と指定します。

grid-auto-flow: columnを指定している例

■(参考)grid-auto-flowで指定できる値

row(初期値) 左上から右方向へ順番にアイテムが表示されていく
column 左上から下方向へ順番にアイテムが表示されていく
dense 空のスペースを埋めるようにアイテムが表示されていく

 

grid-auto-rows / grid-auto-columns:暗黙的なグリッドの行、列サイズを指定する

6つ目はgrid-auto-rows / grid-auto-columnsで、暗黙的に生成されたグリッドの行、列サイズを指定することができます。

grid-auto-rows 暗黙的なグリッドの行サイズを指定
grid-auto-columns 暗黙的なグリッドの列サイズを指定

 

「暗黙的な」というのがわかりにくいですが、要するに定義した行と列の中に収まりきらずにできた(はみだした)行や列をどうするか指定する方法です。

たとえば、下記は3列1行のグリッドレイアウトに5つのグリッドアイテムを配置した例です。

 

4個目以降(Grid Item 4,5)は、2行目にはみ出していることがわかります。

この2行目は定義していないですが、下に暗黙的にグリッドが生成されて行が追加されていることが分かります。(デフォルトでは、暗黙的なグリッドの行、列サイズはautoとなっている。)
暗黙的に生成された行
 

この暗黙的に生成された行のサイズを変更してあげたい場合は「grid-auto-rows」を指定してあげればOKです。

grid-auto-rowsを指定して暗黙的に生成された行のサイズを変更している

なお、デフォルトでは定義された列と行にアイテムが収まらない場合、自動的に行が追加されるようになっています(上記例)。もし、grid-auto-flowプロパティの値に「column」が指定されている場合は列が自動的に追加されます。

 

横並びのグリッド数を画面サイズに合わせて変化させる方法

グリッドレイアウト(display: flex)は使い方によっては、メディアクエリの記述をしなくてもレスポンシブサイトの実装ができるので非常に便利です。

グリッドレイアウトを使ってレスポンシブデザインを実装している例
 

ここでは、横並びのグリッド数を画面サイズに合わせて変化させる方法を紹介します。

今回は以下のコードを準備しました。

横並びのグリッド数を画面サイズに合わせてレスポンシブに変化させる方法の解説用コード

これを最終的には、各グリッドの横幅最小値を300px、最大値を1frとして、コンテナ内に300px以上のスペースがある場合は、アイテムが新しい列に表示(ない場合は下に折り返して表示)されるように実装していきます。

グリッドレイアウトを使ってレスポンシブデザインを実装している例

実装の手順は以下の通りです。

■横並びのグリッド数を画面サイズに合わせてレスポンシブに変化させる手順

  • STEP. 1:repeat関数の「auto-fit」を指定してアイテムが自動で折り返されるようにする
  • STEP. 2:minmax関数を使用してグリッドの横幅の最小、最大値を指定する

 

STEP. 1:repeat関数の「auto-fit」を指定してアイテムが自動で折り返されるようにする

まずSTEP. 1では、grid-template-columnsの値にrepeat関数「auto-fit」を指定して、アイテムが自動で折り返されるようにしましょう。

repeat関数では1つ目の値に「auto-fit」、2つ目の値に具体的な数値を指定することで、コンテナ内に指定した数値分のスペースがある場合は新しい列にアイテムが表示(ない場合は折り返して次の行に表示)されるようになります。

repeat(auto-fit, 300px)を指定しているため、コンテナ内に300pxのスペースがある場合は新しい列にアイテムを表示(ない場合は折り返して次の行に表示)されるようになっている

新しいアイテムが入るスペースがあれば新しい列が追加される。(なければ次の行に折り返される。)

これでコンテナ内に300pxのスペースがある場合は、アイテムを新しい列に表示、ない場合は折り返して次の行に表示させることができました。

なお、「auto-fit」と似たような値として「auto-fill」という値も存在します。

auto-fill 親要素にスペースが余る場合、空のグリッドが生成される
auto-fit 親要素にスペースが余る場合、空のグリッドが生成されず単なる余白として扱われる

これらの値は似ていますが、空のグリッドが生成されるかどうかという点で挙動が異なります。そこで、後ほどauto-fitとauto-fillの挙動の違いについては補足として図で解説していきます。

 

STEP. 2:minmax関数を使用してグリッドの横幅の最小、最大値を指定する

STEP. 2では、minmax関数を使用してグリッドの横幅の最小、最大値を指定しましょう。

STEP. 1では、各グリッドの横幅を300pxと指定しているため、グリッドコンテナ内にスペースがある場合でもアイテムの横幅は変更されず、300pxのままとなっています。

グリッドコンテナ内にスペースがある場合でもアイテムの横幅は変更されず、300pxのままとなっている

そこで、グリッドコンテナ内にスペースがある場合は各アイテムが引き伸ばされスペースを埋めるようにしたいのですが、その場合はminmax関数を指定してグリッドの最小、最大値となる横幅を指定してあげればOKです。

minmax関数ではコンマで区切って1つ目の値に最小値、2つ目の値に最大値を指定します。

グリッドレイアウトを使ってレスポンシブデザインを実装している例

これで、グリッドコンテナ内にスペースがある場合は、最大値である「1fr」がアイテムの横幅に適用されるので、各アイテムがコンテナ内で同じ比率を保ったまま引き伸ばされるようになります。

gridで使用できる単位「fr」についても【CSS Grid Layout】display: gridの使い方!使用できるプロパティも解説にて解説しているので、詳しくはこちらをご覧ください。

 

補足:auto-fitとauto-fillの挙動の違い

「STEP. 1」の解説の中で「auto-fit」とよく似た値として「auto-fill」があることを前述しました。これらは、auto-fillでは親要素にスペースが余る場合、空のグリッドが生成されるのに対して、auto-fitでは生成されず単なる余白として扱われる点で異なります。

auto-fill 親要素にスペースが余る場合、空のグリッドが生成される
auto-fit 親要素にスペースが余る場合、空のグリッドが生成されず単なる余白として扱われる

■(参考)auto-fitとauto-fillの挙動の違いが分かるデモ

auto-fitとauto-fillの違いを表している図

auto-fitとauto-fillの挙動の違いを表している図

そのため、以下のように親要素にスペースが余る場合にグリッドアイテムの幅を引き伸ばしてスペースが埋められようにしてあげたい場合は、「auto-fit」を使用してあげるようにしましょう。

 

 

グリッドレイアウトの使用例

最後に、グリッドレイアウト(display :grid)を使って作成されるレイアウト例を1つ紹介します。

グリッドレイアウトを使うと以下のようなレイアウトが指定できます。

グリッドレイアウトの実際の使用例

 

 
※上記では「grid-template-rows」を指定せず暗黙的にグリッドの行を定義することで、高さを要素自身の高さに合わせられるようにしています。
 
グリッドレイアウトの実際の使用例
 

 
 

まとめ グリッドレイアウトdisplay:grid

まとめです。今回は複雑なレイアウトも簡単に組むことができるCSSのグリッドレイアウト(display: grid)の使い方について解説しました。

前述したように、グリッドレイアウトでは列数と行数をあらかじめ指定し、水平線と垂直線が交差してできたエリアにアイテムを配置していくことでレイアウトを組んでいきます。

グリッドレイアウトの設定イメージ

グリッドレイアウトの考え方や本記事で紹介しているgrid系のプロパティの使い方が理解できると、様々なレイアウトも少ない記述で実装することができるようになるので、使い方を覚えておくと良いでしょう。

なお、単純に横並びにしたいだけの場合はフレックスボックスもよく利用します。フレックスボックスの使い方は以下の記事にて解説していますので、興味がある方はあわせてご参照ください。

 

今回は以上になります。最後までご覧頂き、ありがとうございました。


 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。

教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


 



検索して記事を見つける

探したいキーワードを入力・検索して記事を見つけたい方はこちら

-CSS