「CSSグリッド」とは？基礎と使い方を解説

2次元レイアウト「CSSグリッド」の登場

そこで近年期待を浴びているのが、「CSSグリッド」を活用したレイアウトです。今までのレイアウトの問題は、「回り込み」の制御にばかり気をとられていたことです。では、なぜそもそも「回り込み」が発生するのでしょうか？

答えは、*「段組が1次元的だから」*です。

コーディングは上から下にコードを書いていきますが、そうしたコードによって生成された要素は、CSSで指定をしなければ、すべて上から下に縦並びになっています。それを無理矢理、CSSによって横並びにしたりしているのです。

しかし、「CSSグリッド」レイアウトはそうしたレイアウトとは違って、*「2次元レイアウト」(two-dimentional layout)*を採用しています。つまり、ブロックを作って並べるのではなく、1枚のブロックを縦方向や横方向に区切っていいく、という考え方です。

筆者作成

CSSグリッドで押さえておきたい7つの概念

Flexboxで最低限押さえておきたいのは、親要素であるFlexboxコンテナーと、子要素であるFlexboxアイテムの概念です。

それでは、CSSグリッドのほうはどうでしょうか？

1. グリッドコンテナー

まず、Flexboxと同様に、CSSグリッドでも親要素があり、これをグリッドコンテナーと呼びます。グリッドコンテナーの中に、子要素であるグリッドアイテムを配置していくことになります。

2. グリッドアイテム

グリッドアイテムは、親要素であるグリッドコンテナーの中に配置される子要素です。ただし、Flexboxアイテムとは違い、並べられたブロックというよりも、あくまでもグリッドコンテナーを区切るためのブロックであることに注意するべきです。

3. グリッドライン

さて、ここからがFlexboxと大きくことなる部分です。

CSSグリッドレイアウトでは、要素を縦・横の2つの線を使って段を作成していきます。

筆者作成

グリッドラインは、垂直方向に分割する*「列」(column)と、水平方向に分割する「行」(row)*に分割されます。

筆者作成

グリッドラインは数字によって参照することができ、最初のラインを1として数えていきます。また、一番最後のラインも数字として数えていくことに注意しておきましょう。

4. グリッドセル

筆者作成

列と行の2本の線で区切られたところが、グリッドセルと呼ばれるものです。イメージとしてはテーブルセルに近いとも言えます。

5. グリッドトラック

筆者作成

グリッドトラックとは、2本の列もしくは行で区切られた垂直・水平の連続したグリッドセルです。エクセル操作を行うように、CSSグリッドでも縦横の1行列を操作できます。

6. グリッドエリア

筆者作成

グリッドエリアは、4つのグリッドラインで区切られた1つ以上の四角形のエリアのことです。グリッドエリアを操作して何らかの処理を加えることもあります。

7. グリッドギャップ

グリッドギャップとは、グリッドトラック間の空白スペースのことです。より一般的に言えば、「ガーター」(gutter)とも呼ばれているようです。