レイアウトを司る新しい風「CSS Grid Layout Module」を触ってみる（第一回）

Shinya Okazawa

2018.03.29

こんにちは。脳みその間取りはワンルーム、フロントエンド担当のザワです。

今回、シリーズで取り上げるのは「CSS Grid Layout Module」。その名を初めて聞いてからしばらく時が経った気がします。名前が出始めた当初は、対応ブラウザがまだ不十分に思えたので、案件に取り入れるのはまだ先の話かと聞き流していました。

しかし、最近になっても私のRSSリーダーを賑やかしていたので、そろそろ何者なのかくらいは知っておいても損はないかなと思った次第です。

ネットでいろいろなドキュメントをざっくり見ましたが、私の脳みそでは難しいという所感でしたので、概念的なところをざっくり把握し、簡単なレイアウトをさっそく組んでみたいと思います。

CSS Grid Layout Moduleとは

CSSのdisplayプロパティの新しい値です。レイアウトを作る際に使用します。

display: grid;

何ができるのか？

今まではWebページのレイアウトを作成するために、floatやflexなどを使用して組んでいました。floatでは横方向のみ、flexでは横方向、もしくは縦方向の一方向のレイアウトを作っていました。

ところが、CSS Grid Layout Moduleでは縦横のレイアウトが可能になります。と、言葉で説明してもわかりづらいので後述するサンプルを見てもらえればと思います。

対応ブラウザ

PCのモダンブラウザは問題なく使用できそうです。IEは一部サポートということで要検証ですね。スマホブラウザ、iOS、Androidブラウザともに案件によっては要注意といったところです。

Can I use

試してみる

簡単なレイアウトを組んでみます。

See the Pen CSS Layout Grid by Zawa (@sowork) on CodePen.

何やら見慣れないプロパティが続々出てきましたね。

さて、次にgridを用いてどうやって今回のレイアウトを実現しているのか見ていきましょう。

gridの使用例について

ラッパー要素

.container {
    display: grid;
    grid-template-rows: 80px 200px 200px; //行の高さを指定。縦に3行並ぶことになります。
    grid-template-columns: 1fr 30%;  //列の幅を指定。横に2列並ぶことになります。1frは次に指定している30%の余り、70%分のスペースを埋めてくれます。
}

子要素

.header {
  grid-row: 1 / 2;
  grid-column: 1 / 3;
}

.main {
  grid-row: 2 / 3;  
  grid-column: 1 / 2;
}

.side {
  grid-row: 2 / 3;  
  grid-column: 2 / 3;  
}

.footer {
  grid-row: 3 / 4;  
  grid-column: 1 / 3;  
}

数値とスラッシュで何やら指定してますね。割り算なのかな？とか思いますよね。実は、gridと呼ばれるだけあって、グリッドの線の番号を指定しています。1から2、2から3といった具合です。参考の図を用意しました。

CSS Gridのラインの図