CSS Gridの使い方はよく分からないけど、Flexboxの方が簡単そうだからFlexboxを使っているという方も多いのではないでしょうか。

確かに、CSS GridはFlexboxと比べると少し扱いづらく、最初に触れる時に抵抗を感じてしまう人もいるかもしれません。

そこで今回は、grid-templateプロパティを使用したCSS Gridの簡単な使い方をご紹介したいと思います。

CSS Gridとは

CSS Gridとは、CSSによるレイアウト手法の1つで、CSS Flexboxと並んでよく使われるスタイル定義の方法です。

Flexboxと比べると、HTMLをシンプルに記述することができたり、細かなレイアウトの作成を行いやすいというメリットがあります。

一方で、CSS Gridを使うデメリットは、学習コストが高いということが挙げられると思います。

柔軟にレイアウトを指定することができる一方で、使用することができるプロパティもたくさんあるため、それらの使い方を覚えるのが少し大変です。

IEやEdgeに一部のプロパティが対応していないなどもデメリットとして挙げられますが、これらはAutoprefixerなどを使ってベンダープレフィックスを付与することで対応することが可能です。

grid-templateで簡単にレイアウトを作る

上記に述べたとおり、CSS Gridは独特の記法から難しく感じてしまう人も少なくありません。

しかし、grid-templateプロパティを使えばもっと簡単にCSS Gridでレイアウトを作ることができるようになります。

例えば、下記のような「聖杯レイアウト」と呼ばれるレイアウトをCSS Gridで作ってみるケースを見ていきましょう。

HTMLのコードは次のようになります。

基本的なCSSの書き方

grid-templateを使わずに記述すると、下記のようになります。

コード量自体はあまり多くないものの、grid-rowgrid-columnx / yという書き方が個人的に分かりづらく感じてしまいます。

grid-templateを使ったCSSの書き方

grid-templateを使うと、上記のコードが次のようなコードで済みます。

さらに、Sass(.scss)を使えば@eachを使ってさらにシンプルに記述することが可能です。

grid-rowgrid-templateを使った場合に比べて、かなり直感的でシンプルなコードになりました。

grid-templateを正しく理解する

実は、grid-tempalteを使って行っていることは、下記の3つのプロパティをまとめて指定しているだけです。

  • grid-template-rows
  • grid-template-columns
  • grid-template-areas

このコードを書き換えると下記のようなコードになります。

gird-tempalte-areasプロパティでグリッドの位置(エリア)ごとに名前を付けておき、子要素でgrid-area: {エリア名}を指定することでそれぞれ表示位置を指定することができます。

grid-areaを使えばgrid-rowgrid-columnを子要素で指定しなくていいため、x / yのような書き方をせずに済み、個人的にはこちらの方が直感的で分かりやすいと思います。

また、grdi-template-areasを使用しない場合も、

というコードは

のように記述することができます。

IEやEdgeなどのブラウザ対応には注意が必要

IEやEdgeなどはgrid-areaプロパティが対応していないため、上記のCSSをそのまま使ってしまうと上手く表示されません。

しかし、Autoprefixerなどを使ってベンダープレフィックスを自動で付与すれば問題なく使用することができます。

ベンダープレフィックスを付与すると、下記のようなコードが出力されます。

自分でこれを記述しようと思うと大変なので、CSS Gridを使う場合はAutoprefixerなどを使ってベンダープレフィックスを自動で付与することをおすすめします。

まとめ

CSSによるレイアウト手法は、「CSS Grid」と「CSS Flexbox」の2つが一般的になりつつあります。どちらの方が優れているということは無く、それぞれメリットとデメリットがあり、場面によって使い分けることが大切です。

片方しか使っていないという方は、この機会にCSS GridとCSS Flexboxのどちらも身に付けて、より分かりやすく、メンテナンスしやすいコードを目指してみてください。

おすすめの記事