【CSS Grid Layout】グリッドレイアウトの超簡単な作り方（IE11も対応）

gridはグリッドレイアウトが設計できるCSSプロパティです。
各ブラウザ対応が懸念され、なかなか踏み込みにくい印象のgridですが手軽にグリッドレイアウトが実現可能です。今回はIE11の対応も含めサンプル付きで解説していきます。

CSS gridの基本的な使い方
CSS gridのIE11対応
- 1.columnとrowに関する設定をどちらもしておく
- 2.Autoprefixerで変換する
まとめ

CSS gridの基本的な使い方

最終的に以下のようなグリッドレイアウトを作成する想定で解説します。

HTMLの設定

グリッドコンテナとなる親要素はwrap_gridで囲み、item1~item5を子要素（グリッド）とします。

<div class="wrap_grid">
	<div class="item1">1</div>
	<div class="item2">2</div>
	<div class="item3">3</div>
	<div class="item4">4</div>
	<div class="item5">5</div>
</div><!-- wrap_grid -->

親要素の設定

グリッドコンテナ親要素のwrap_gridに以下を設定します。
display: grid;にします。

grid-template-columnsカラムの幅や割合を設定します。

.wrap_grid{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

grid-template-columns: 1fr 1fr 1fr; で三等分にされます。
他に以下のような書き方でもOKです。

grid-template-columns: 33.33%, 33.33%, 33.33%;
grid-template-columns: repeat(3, 1fr);

子要素（グリッド）の設定

grid-rowで行のエリアを指定、grid-columnで列のエリアを指定できます。
エリアはグリッド線を基準として
grid-row: 【グリッドの開始位置】/ 【グリッドの終了位置】 ;
のように指定します。

以下では.item1（紫）の行エリアの指定とitem2（ピンク）の列エリアの指定をしています。

.wrap_grid .item1{
	background: #c881ff;
	grid-row: 1/3;
}
.wrap_grid .item2{
	background: #ffa1c0;
	grid-column: 2/4;
}

.item4と.item5にも同じようにエリア指定を付けます。

.wrap_grid .item4{
	background: #6ce9ff;
	grid-column: 1/3;
}
.wrap_grid .item5{
	background: #9381ff;
	grid-row: 2/4;
	grid-column: 3/4;
}

こちらで IE対応を除く基本的な設定は終了です。

サンプル

CSS gridのIE11対応

IEに対応するにはIE用のベンダープレフィックスが必要です。
以下のサイトからIE用のベンダープレフィックスを自動育成してくれるツールを使用します。

以下の手順で対応させます。

1.columnとrowに関する設定をどちらもしておく

IEではcolumnとrowの設定ではどちらかを省略することができないので上記のcssの体裁を少し整える必要があります。

親要素ではgrid-template-columns: 1fr 1fr 1fr;のみの設定でしたが
grid_template-rows: auto auto auto;も設定しておきます。

子要素も同じようにgrid-columnとgrid-rowを設定します。

.wrap_grid{
	display: grid;
	grid-template-columns:  1fr 1fr 1fr;
	grid_template-rows: auto auto auto;
}
.wrap_grid div{
	text-align: center;
	color: #FFF;
	font-size: 200%;
	padding: 100px 0;
}
.wrap_grid .item1{
	background: #c881ff;
	grid-column: 1/2;
	grid-row: 1/3;
}
.wrap_grid .item2{
	background: #ffa1c0;
	grid-column: 2/4;
	grid-row: 1/2
}
.wrap_grid .item3{
	background: #6cffd4;
	grid-column: 2/3;
	grid-row: 2/3;
}
.wrap_grid .item4{
	background: #6ce9ff;
	grid-column: 1/3;
	grid-row: 3/4;
}
.wrap_grid .item5{
	background: #9381ff;
	grid-row: 2/4;
	grid-column: 3/4;
}

このようにrowとcolumnの設定を記述します。