次世代のCSS3プロパティ「CSS Grid Layout Module」について学ぶ

CSSのレイアウトを行う方法はずいぶん変化してきました。テーブルレイアウトやfloatによるレイアウト、最近ではFlexboxが主流になりつつありますが、グリッドレイアウトのための新プロパティ「CSS Grid Layout Module」の仕様策定が進められています。
2016年9月現在、対応ブラウザはIE10以上およびEdgeのみとなりますが、策定が完了して各ブラウザの実装が進めば、より複雑なグリッドレイアウトを効率よく行うことができるようになります。
今回は簡単にCSS Grid Layout Moduleを一足早く学習してみたいと思います。

はじめに

先述のように、Glid LayoutはIE10以上とEdge以外では現在のところ使用できませんが、ChromeやFirefoxでは拡張フラグをONにすることで、このプロパティが使えるようになります。
今回はChromeを使用して実演します。chrome://flags/へアクセスして、「試験運用版のウェブプラットフォーム」の機能を有効にします。

用語

Glid Layoutを使用するにあたり、知っておく必要のある用語をご紹介します。

① Grid Line – (区切り線)
② Grid Track – (グリッドの1列または1行)
③ Grid Cell – (グリッドの中の1ブロック)
④ Grid Area – (セルを矩形にまとめた特定の領域)

基本的なマークアップ

グリッドを作成するにはまずContainerを用意し、その中に子要素のdivを並べます。

<section class="grid-1">
	<div class="item-1">1</div>
	<div class="item-2">2</div>
	<div class="item-3">3</div>
	<div class="item-4">4</div>
	<div class="item-5">5</div>
	<div class="item-6">6</div>
	<div class="item-7">7</div>
	<div class="item-8">8</div>
	<div class="item-9">9</div>
</section>

上記のhtmlに対してスタイルを設定していきます。
Containerに対してdisplay: glid;というプロパティを指定します。

.grid-1 {
	display: grid;
}

さらに行、列の設定をしていきます。
grid-template-columnsで行、grid-template-rowsで列の指定が可能です。
そして、grid-auto-flow: row;で行方向に自動整列をさせます。追加したものが以下。

.grid-1 {
	display: grid;
	grid-template-columns: auto auto auto;
	grid-template-rows: auto auto auto;
	grid-auto-flow: row;
}

スタイルを調整したプレビューが以下。
上記のコードのみで、グリッドレイアウトが形成されているのがわかると思います。

See the Pen grid1 by SCLIPPS (@sclipps) on CodePen.

セルの位置設定

次に、セルの位置を細かく指定していきましょう。
グリッドの要素はhtmlの順序に依存せず、grid-columnとgrid-rowによって位置を決めることができます。
今回はさらに、セル間の隙間も作っていきます。

.grid-1 {
	display: grid;
	grid-template-columns: auto 20px auto 20px auto;
	grid-template-rows: auto 20px auto 20px auto;
}

Containerの子要素のdivに対して、どこのセルに当てはめるかを指定していきます。

.item-1 {
	grid-column: 1;
	grid-row: 1;
}

上記では1つのセル配置していますが、grid-row-start、grid-row-end、grid-column-start、grid-column-endを使用してグリッドのエリアを指定できます。この際はセルの位置ではなく、区切り線の位置で番号を指定していきます。

.item-2 {
	grid-row-start: 1;
	grid-row-end: 4;
	grid-column-start:3;
	grid-column-end: 6;
}

それでは、プレビューを確認してみましょう。

See the Pen grid2 by SCLIPPS (@sclipps) on CodePen.

まとめ

以上、CSS Glid Layout Moduleを使用したレイアウトについて、基本的な動作を確認することができました。今回は簡単なレイアウトのみですが、非常に簡単にグリッドレイアウトを作成できるのがお分かり頂けたかと思います。
この新しいプロパティは、特定の要素のレイアウトやサイト全体を組むときにも使えるので、近い将来最もポピュラーなマークアップ方法となるのではないでしょうか。