Zenn
📚

図で理解する Grid Layout

2021/08/21に公開
CSS
HTML
tech

前回の Flexbox に続き Grid Layout に関してもよくわかっていなかったので、
続いて仕組み・使い方を図を使って整理してみた。

https://zenn.dev/umatoma/articles/e6c4051f4c882d

Grid

Gridは縦・横に要素を配置できるレイアウト方法です。
Gridを使うことにより、Flexboxよりも複雑な配置のレイアウトが作成できます。

例えば、Flexboxでは行または列どちらかを指定して１次元のレイアウトを作成できました。
Gridの場合は、行と列を同時に指定し２次元のレイアウトを作成できます。

Gridコンテナ・Gridアイテム・Gridセル

Gridを使う上で必要となる要素が「Gridコンテナ」と「Gridアイテム」です。
Gridコンテナの中にGridアイテムを複数並べてレイアウトします。

<div class="container">
   <div class="item">１</div>
   <div class="item">２</div>
   <div class="item">３</div>
   <div class="item">４</div>
   <div class="item">５</div>
</div>

Gridコンテナとして扱いたいHTMLタグに対して、display: grid;を設定します。
また、Gridコンテナ内に並んでいる要素は自動的にGridアイテムとして扱われます。
そのため、明示的にCSSを設定する必要はありません。

.container {
   display: grid;
}

また、Gridアイテムを配置できる単位となる領域が「Gridセル」です。
Gridアイテムは複数のGridセルをまたいで配置できます。

Gridトラック

Gridトラック

GridコンテナにGridアイテムを配置する時、Girdコンテナに「行」と「列」を表す線を引きます。
この行と列を表す２次元の線のうち、並行する２本の線に囲まれた領域が「Gridトラック」です。
列に囲まれたトラックは「列トラック」、行に囲まれたトラックは「行トラック」となります。

Grid Template Columns

列トラックのサイズはgrid-template-columnsで指定できます。
値には64px 8remのように各トラックのサイズを順番に複数指定できます。

この時、値の単位はpxやrem以外に、frという単位が使用できます。
frは使用可能な領域を分割する単位であり、例えば1fr 2fr 3frとした場合には、１対２対３の割合でトラックのサイズが決まります。

.container {
    display: flex;
    grid-template-columns: 64px 1fr 2.5fr;
}

Grid Template Rows

行トラックのサイズはgrid-template-rowsで指定できます。
値には64px 8remのように各トラックのサイズを順番に複数指定できます。

この時、grid-template-columnsと同じく値の単位にfrが使用できます。

.container {
    display: flex;
    grid-template-rows: 64px 1fr 2.5fr;
}

Grid線

Grid線

Gridコンテナを定義するために引かれる、行と列を表す線が「Grid線」です。
引かれた各Grid線には、線を識別するための番号が順番に付けられています。

Grid Column / Row Start / End

Grid線の番号を元に、Gridアイテムの配置方法を指定できます。
例えば、１列目〜３列目かつ１行目〜２行目の領域にGridアイテムを配置する場合は次のようになります。

.item {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}

1,2,3のような絶対値だけでなく、２列先まで・３行先までといった相対的な値も指定できます。
相対的な値はspan 2・span 3のように指定します。

.item {
    grid-column-start: 1;
    grid-column-end: span 2;
    grid-row-start: 1;
    grid-row-end: span 1;
}

また、Gridアイテムが重なるような配置も指定できます。

セル間隔

セル間隔

隣り合うGridセル間のスペースが「セル間隔」です。

Column / Row Gap

このセル間隔はrow-gap・column-gapプロパティで指定できます。
例えば、行方向のセル間隔を64px、列方向のセル間隔を16pxとする場合は次のようになります。

.container {
    display: grid;
    row-gap: 64px;
    column-gap: 16px;
}

また、gapプロパティを使うことでrow-gap・column-gapの値を一括指定できます。

.container {
    display: grid;
    gap: 64px 16px;
}

軸

インライン軸・ブロック軸

Gridアイテム並べる行方向を「インライン軸」と呼びます。
また、列方向を「ブロック軸」と呼びます。

Flexboxと同じく、各プロパティ名で使われている用語は次の図のような関係になっています。

Justify Content / Items / Self

Justify Content

「Gridアイテム全体」の「インライン軸」に対する配置はjustify-contentプロパティで指定できます。

  • start：先頭側に配置
  • end：末尾側に配置
  • center：中央に配置
  • space-between：均等に配置
    • コンテナとアイテム間の余白なし
  • space-around：均等に配置
    • コンテナとアイテム間の余白は、隣接するアイテム間の余白の半分になる
  • space-evenly：均等に配置
    • コンテナとアイテム間の余白は、隣接するアイテム間の余白と同じになる
.container {
    display: grid;
    justify-content: start;
}

Justify Items

「各Gridアイテム」の「インライン軸」に対する配置はjustify-itemsプロパティで指定できます。

  • start：先頭側に配置
  • end：末尾側に配置
  • center：中央に配置
  • stretch：各アイテムのサイズが同じになるよう配置
.container {
    display: grid;
    justify-items: start;
}

Justify Self

「単一のGridアイテム」の「インライン軸」に対する配置はjustify-selfプロパティで指定できます。
justify-selfが設定されている場合は、justify-itemsの値が上書きされます。

  • start：先頭側に配置
  • end：末尾側に配置
  • center：中央に配置
  • stretch：各アイテムのサイズが同じになるよう配置
.item {
    justify-self: start;
}

Align Content / Items / Self

Align Content

「Gridアイテム全体」の「ブロック軸」に対する配置はalign-contentプロパティで指定できます。

  • start：先頭側に配置
  • end：末尾側に配置
  • center：中央に配置
  • space-between：均等に配置
    • コンテナとアイテム間の余白なし
  • space-around：均等に配置
    • コンテナとアイテム間の余白は、隣接するアイテム間の余白の半分になる
  • space-evenly：均等に配置
    • コンテナとアイテム間の余白は、隣接するアイテム間の余白と同じになる
.container {
    display: grid;
    align-content: start;
}

Align Items

「各Gridアイテム」の「ブロック軸」に対する配置はalign-itemsプロパティで指定できます。 s

  • start：先頭側に配置
  • end：末尾側に配置
  • center：中央に配置
  • baseline：各アイテムのベースライン（テキストの位置）が同じになるよう配置
  • stretch：各アイテムのサイズが同じになるよう配置
.container {
    display: grid;
    align-items: start;
}

Align Self

「単一のGridアイテム」の「ブロック軸」に対する配置はalign-selfプロパティで指定できます。
align-selfが設定されている場合は、align-itemsの値が上書きされます。

  • start：先頭側に配置
  • end：末尾側に配置
  • center：中央に配置
  • stretch：各アイテムのサイズが同じになるよう配置
.item {
    align-self: start;
}

Place Content / Items / Self

Place Content

align-content・justify-contentはplace-contentプロパティで一括指定できます。
１つ目の値はalign-contentの値を指定し、２つ目の値はjustify-contentの値を指定します。

.container {
    place-content: start end;
}

Place Items

align-items・justify-itemsはplace-itemsプロパティで一括指定できます。
１つ目の値はalign-itemsの値を指定し、２つ目の値はjustify-itemsの値を指定します。

.container {
    place-items: start end;
}

Place Self

align-self・justify-selfはplace-selfプロパティで一括指定できます。
１つ目の値はalign-selfの値を指定し、２つ目の値はjustify-selfの値を指定します。

.item {
    place-self: start end;
}

まとめ

Gridについて整理できた。
やはり、図にすると頭に情報が入ってきやすいので良い。

Flexbox・Gridそれぞれについて理解できたので、その知識を使ってコンポーネント集とか作ってみたいと思う。

FlexboxとGrid Layoutを使ったCSSレイアウト入門

FlexboxとGrid Layoutを使ったCSSレイアウトに関して書籍にまとめました。

作って学ぶWebサイト制作

情報を整理するついでに、Webサイト制作の入門サイトを作っています。
よかったらご利用ください。

https://web-study.dev/

Discussion