CSS Grid Layoutを使ってみます

こんにちは。好きな季節になってきました。タクシです。

今回はなかなか個人的に使う機会がなかったCSS Grid Layoutについて。
正直必要と感じることもあまりなかったのですが、 やっぱり気になるので今更ですが、改めて使ってみました。

CSS Grid Layoutとは

CSS Grid Layoutはなんだかtableの突然変異版のような感じでしょうか（個人的に）。
tableと同様にcolumnとrowという概念がありますが、 違う点としてはその名の通りgrid（格子）状にレイアウトを組むことができる点です。 また設定値によってはpositionを設定した場合のように振舞うため、比較的自由度が高く、安定してレイアウトが可能です。

使ってみよう

では実際に使ってみます。 プロパティを全て紹介するのは体力が足りないので、 今回はgrid-template-columnをピックアップします。
以下のHTMLをレイアウトしていきます。itemそれぞれ順に赤、青、黄色です。

column（列）の設定です。

grid-template-columnsは列の数を決めます。 上記のように、子要素と同じ数指定すると、このように、横並びになります。

図1

仮に以下のようにしてみましょう。

結果は同じです。
このfrという単位は、空間の分数(a fraction)を表します。
グリッドコンテナー内で利用可能な領域を分数で表し、その値と全体の割合に応じてグリッドトラック（グリッド内の各column、row）は伸縮します。
上記の場合、300pxのうち3つ分、つまり、1/3、1/3、1/3といった風に割り振られるため、 結果的にそれぞれ、100pxずつとなり、図1と変わらない結果となるのです。

このgrid-template-columnsの列（row）版がgrid-template-rowsです。

こちら、columnsもrowsも(s)がつくことを忘れずに。（結構忘れやすいです。）

また、グリッドトラック内のどこにそれぞれの要素を配置するか、指定するのがgrid-column, grid-rowです。

どんな時に使う？

なんだか便利そうなCSS Grid Layoutですが、結局どんな時に使えばいいのでしょうか？
似たようなもので思い浮かぶのが、Flexboxです。
Flexboxも要素をバランスよく並べるのには便利です。
justify-contentなどを使って、横方向にわざわざ細かく指定をしなくてもいい感じに要素を配置してくれるのでなかなか重宝しますよね。
並べるだけならFlexboxでいいのですが、何が違うのでしょうか？

・１つ１つの配置を細かく指定できる

個人的に思うのは、シンプルに要素を同じパターンで配置したい場合は、結構Flexboxでまかなえると思うのですが、
その安定さを保ちつつ、細かく位置を指定したい、と言う場合に、Gridは役に立ちます。
grid-column grid-rowなどを使えば、子要素１つ１つのgrid上の位置を指定できるので便利でした。

・レイヤーにできる

配置指定によっては、要素同士を被らせることもできて、positionを使っているような、柔軟なレイアウトが可能です。

微妙な点

少し微妙だと思う点は、最初にうまくグリッドエリアなり、グリッドコンテナなりを設定しなければならないところです。
一度理解してしまえばそこまで難しくはないかもしれないのですが、少し学習コストがかかるものかもしれません。

結局？

もちろんデメリットと感じる部分や、どう使えばいいのかといった部分で様々あるのですが、
個人的には結構色々な使い方ができるような気がしているので、場面によってうまく判断しながら利用していこうと思います！