CSSグリッドレイアウトを極める！基本的な使い方とプロパティの一覧。

この記事では、CSSのレイアウト手法であるグリッドレイアウトについてその基本的な使い方を説明していきたい。

この記事は以下のような人を対象にしている。

• グリッドレイアウトがどのような手法のレイアウトか知りたい！
• グリッドレイアウトの使い方を目的別に逆引き検索したい！
• グリッドレイアウトで使われるプロパティの種類と役割を確認したい！

グリッドレイアウトは非常に理解しやしいレイアウト手法。エクセルの表を作成するような感覚で、直感的にレイアウトを作成することができる。CSSを使ったレイアウトに苦手意識を持つ人ももう一度この機に試してみてほしい。

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

グリッドレイアウトは格子状のグリッドにアイテムを配置していくレイアウト。

イメージしづらいという人はエクセルの表を思い浮かべてもらうと分かりやすいかもしれない。

グリッドレイアウトには様々なグリッドの構造・アイテム配置の指定方法があり、自分が使いやすいと感じる方法で構成・配置を指定していくことができる。

グリッドレイアウトは要素のdisplayプロパティをgridに指定することで使うことができる。

display: grid;

グリッドレイアウトは同じくレイアウトの手法であるフレックスボックスと共にCSS3から導入された。

フレックスボックスについて知りたい人はこちらの記事を読んでほしい。

関連記事

CSSフレックスボックスの使い方を初心者向けに解説！縦・横並び/間隔/幅の指定方法。

この記事では、CSSのフレックスボックス（Flexbox）について基本的な使用方法を初心者向けに、また目的ごとに解説したい。 フレックスボックスはその使い勝手の良さから既にCSSレ […]

グリッドレイアウトの構成

グリッドレイアウトを構成する要素はそれぞれに以下のように呼ばれる。

• グリッドを収納している要素　➡　グリッドコンテナ
  
• 列と行から構成される格子　➡　グリッド
  
• グリッドに配置されるブロック　➡　グリッドアイテム

各要素の呼び方は人によって若干違いがあるが、この記事では上記の呼び方で統一したい。

グリッドレイアウトの使い方

ではグリッドレイアウトの使い方を確認しよう。

グリッドレイアウトを使用する

フレックスボックスはコンテナとアイテムから構成される。

displayプロパティにgridを指定すると、その要素はグリッドレイアウトのコンテナーとなる。

.container {
  display: grid;
}

displayをinline-gridにするとグリッドがインライン要素となる。（ちなみに通常のgridはブロック要素である。）

グリッドを作成する

グリッドコンテナにグリッドを作成していこう。

grid-template-rowsとgrid-template-columnsプロパティを使用してグリッドの列と行の大きさを指定する。

ここでは4つの列と3つの行を作りそれぞれにサイズをpxで指定する。

.container {
  display: grid;
  grid-template-columns: 50px 300px 300px 50px;
  grid-template-rows: 50px 120px;
}

次にグリッドに表示するアイテムを作成する。

containerのdiv要素の中に適度な数のdiv要素を作成し、それぞれに適当な色を割り当てる。

<div class="container">
  <div style="background: #aaffee">A</div>
  <div style="background: #d87a31">B</div>
  <div style="background: #7987c6">C</div>
  <div style="background: #ac75ba">D</div>
  <div style="background: #d5c0d6">E</div>
  <div style="background: #578c99">F</div>
  <div style="background: #d3d2c6">G</div>
</div>

問題が無ければ以下のように色分けされたグリッドがAからGまで順番に表示されるはず。

サイズ指定で使用する単位

アイテムのサイズを指定する際は様々な数量単位を使うことができる。

分数で指定する（fr）

アイテムのサイズ指定でもっともよく使うのがこのfrという単位。

「fr」はfractionの略で、コンテナの合計幅からサイズ指定した部分を取り除き、残りを分数で割り当てる。

前章で作ったグリッドを例にfractionを使ってみよう。

.container {
  display: grid;
  width: 800px;
  grid-template-columns: 50px 3fr 2fr 1fr; // fractionを使った幅の指定
  grid-template-rows: 50px 120px;
}

この場合、コンテナの幅が800px、最初の列が50px、残りは計6frなので、(800-50)÷6=125で1frは125pxとなる。よってそれぞれのセルの幅は50px・375px・250px・125pxとなる。

連続するアイテムサイズの指定

グリッド内で繰り返し同じサイズを指定する場合はrepeatを使用するといい。

grid-template-columns: 50px repeat(2, 200px) 100px;

最小と最大値を指定する（minmax）

minmaxでは、サイズの最小値と最大値を指定することによってサイズをフレキシブルに割り当てる。

.container {
  display: grid;
  width: 800px;
  grid-template-columns: 50px 200px 200px minmax(50px, 100px); // 最後の列を最小値50px・最大値100pxに指定
  grid-template-rows: 50px 120px;
}

この例では、4つ目の列をminmax(50px, 100px)で指定している。コンテナの幅が800pxで最初の3つの列を合計すると450pxになりまだ幅に余裕があるので4つ目の列は100pxで表示される。

次にコンテナの幅を480pxに変更してみる。

コンテナの幅が480pxで最初の3つの列の合計が450pxなので残りは30pxとなる。この場合は4列目は指定した最小値である50pxで表示される。

余白を埋める（auto）

コンテナの残りの幅をセルで埋めたい場合はautoを使用するといい。

grid-template-columns: 50px 200px 200px auto;

この例では4つ目の列をautoにしている。

コンテナの幅が800pxで最初の3つの列の合計が450pxなので4つ目の列は350pxで表示される。

コンテンツのサイズを基準にする（max-content・min-content・fit-content）

グリッドアイテムにあるコンテンツを基準にして、アイテムのサイズを決定したい場合もあるだろう。

そういった場合はmax-content、min-content、fit-contentなどを単位として指定する。

以下の例では、アイテムDをテキストに書き換えたうえで、4行目をmax-contentにする。

grid-template-columns: 50px 200px 200px max-content;

コンテントの最大幅に合わせて列が表示される。

グリッドアイテムの配置

グリッドレイアウトではアイテムはHTML上の順番で自動的に配置されるが、アイテムの位置を特に指定したいという場合もあるだろう。

そういった場合はグリッドアイテムのCSSに対してプロパティを付け加える。

.item-a {
  grid-column-start: 3; // 3列目の始めから5列目の始めまで。つまり、3・4列目。
  grid-column-end: 5;　
  grid-row-start: 1; // 1行目の始めから2行目の始めまで。つまり、1行目。
  grid-row-end: 2;
}

これによってアイテムAは3列目と4列目を埋めるように配置される。また、A以外のアイテムはグリッドの空白を埋めるように再配置される。

なお、startとendをひとつのプロパティとして列と行を指定することもできる。

grid-column: 3 / 5;
grid-row: 1 / 2;

さらにgrid-areaプロパティを使用すればさらに列と行を同時に指定することができる。

grid-area: 1 / 3 / 2 / 5; // row-start / column-start / row-end / column-end

グリッドレイアウトのプロパティ一覧

次にグリッドレイアウトで使用されるプロパティを紹介していきたい。

グリッドレイアウトのCSSプロパティの中には、グリッドコンテナに対して使用するものとグリッドアイテムに対して使用するものがある。

グリッドコンテナのプロパティ

以下はグリッドコンテナに使用できるプロパティと指定可能な値の一覧だ。

グリッドアイテムのプロパティ

以下はグリッドアイテムに使用できるプロパティと指定可能な値の一覧だ。