ブロックチェーン・AI・システム開発の株式会社INDETAIL

新しいレイアウト仕様、CSS Grid Layoutの基本を理解する

2017.12.14
rockd

12月ももうすぐ半分が終わりそうですね。
こちらの記事はINDETAIL Advent Calendar 2017の記事です。

皆さんはWebページのレイアウトをどのように行っていますか?
floatdisplay:inline-block;を使った方法や、最近ではFlexboxも良く使われるようになってきました。

今回はCSS Grid Layout(以下CSSグリッドレイアウト)という二次元グリッドレイアウトを構築できるレイアウトモジュールを紹介します。
ページを列と行に分割し格子のようなグリッド上でHTMLの構成を変えずにCSSで自由な配置を実現するため、ページのデザインによっては非常に役立つ機能になります。

現在(2017年12月時点)、W3Cで仕様策定中の新しい機能ですが、ここ最近になってEdge/Chrome/Firefoxといったモダンブラウザでは問題なく使用することができるようになりました。
リアルタイムの対応状況はCan I useでご確認ください。

恐らく今後CSSグリッドレイアウトで構築されたページもチラホラ出てくるのではないかなと思います。
今回の記事ではほんの触り部分ですが基本となる内容を解説していきます。

早速ですがCSSグリッドレイアウトを使う前に、いくつか特有の用語がでてきますので覚えておきましょう。

CSSグリッドレイアウトで使われる用語

グリッドコンテナー

グリッド全体を囲む要素のことを差します。
CSSグリッドレイアウトを使用する際には必ず必要です。
要素に対してdisplay: griddisplay: inline-gridを指定することでグリッドコンテナーを作成します。

グリッドアイテム

グリッドコンテナー直下の子要素のことを差します。
実際にグリッド上に配置される要素です。

グリッドライン

グリッドを分ける垂直および水平の線のことを差します。
グリッドの上下左右それぞれの両端にも存在し、上あるいは左から1から順に正の番号が振られています。

グリッドトラック

行や列のグリッドラインの間に挟まれた空間のことを差します。
行を指定するgrid-template-columns および列を指定する grid-template-rows で行と列の間隔を指定します。

基本的な2カラムレイアウトを作ってみよう

上記のような2カラムレイアウトを作ってみましょう。
まずはベースとなるHTMLを用意します。

次にCSSを用意します。この段階ではまだgridを使っていません。
分かりやすいようにそれぞれの要素にpaddingを設定しています。

グリッドコンテナーを作成する

.containerをグリッドコンテナーに設定します。

まだ見た目上の変化はありません。

グリッドトラックの幅と数を決める

次にグリッドコンテナーに対してグリッドトラックを設定するのですが、試しに200pxで設定してみましょう。
200pxのグリッドトラックを2列・2行にする場合下記のように記述します。
用語でも書いたとおり行(column)の間隔はgrid-template-columns 列(row)の間隔はgrid-template-rowsで指定します。

200pxで区切られた形になりました。

では実際に作成したい区切りで設定します。

ここで出てくるfrという単位ですがグリッドコンテナー内の利用可能な空間の分数 (a fraction) を表します。
例えば上で使っているgrid-template-columns: 100px 1fr;grid-template-columns: 1fr 1fr;とすると、
行の幅を50%、50%といった区切りにすることが出来ます。また、1fr 1frといった書き方はrepeat(2, 1fr)というrepeat記法でまとめることも可能です。

グリッドアイテムの配置を決める

次にグリッドアイテムをグリッドラインのどこからどこまで配置するのか決めていきます。
行のラインの最初と最後を指定するのは grid-column-start / grid-column-end
列のラインの最初と最後を指定するのは grid-row-start / grid-row-endを使います。

.headerの位置を考えた場合に行のグリッドラインは1本目から3本目、列のグリッドラインは1本目から2本目になるので、指定の方法は下記になります。

実は上記のような書き方はgrid-columngrid-rowを使って下記のように省略することできます。

一通り各グリッドアイテムに設定しました。
最初のイメージ通りになったかと思います。

まとめ

今回はCSSグリッドレイアウトの触りの部分を紹介しました。
所感としてグリッドトラックやラインといった概念の理解が最初は難しく感じるかもしれませんが、これ以外にも便利な機能が沢山あり、理解して使えばレイアウトのパターンの可能性が広がるのではないかと思いました。

また、CSSグリッドレイアウトを使うと下記のような利点もあります。

HTMLの構造を変えずに自由に配置することができるのでHTMLをセマンティックに記述できる
余計なdivタグなどの要素を追加しなくて済む

今後も回を分けてCSSグリッドレイアウトの便利な使い方を紹介していきたいと思いますので興味を持った方は是非試してみてください。

rockd

エンジニア。 最近はフロントエンドを担当することが多い。 たまにデザインをすることもある。 インドアな見た目とは裏腹に意外とアウトドア。

「いいね」ボタンを押すと、最新情報をすぐに確認できます。