CSSグリッドレイアウトについて。flexboxより使いやすいが、問題はいつものアイツだな。

今回はCSSグリッドレイアウトについてです。以前からflexboxと並んで気になっていたこのグリッドレイアウト。2018/4現在のサポートブラウザは、モダンブラウザとIE11,edgeとなりましたね。ただ、IEとedgeについては完全対応ではないので少し手間が必要です。
でも、一応揃ったので勉強がてら組み込んでみます。これが今後基本的なベースとなれば本当楽なんですけどね。

CSSグリッドレイアウト概要

CSSグリッドレイアウトでは、要素を縦・横の2つの線を使って作成していきます。エクセルをイメージすると分かりやすいですね。
各グリッドラインは、水平に分割する「行」(row)と垂直に分割する「列」(column)に分割されます。

行と列に区切られたエリアをグリッドセルと呼ばれます。

2本の行や列で区切られた水平・垂直のエリアをグリッドトラック呼びます。

4つのグリッドラインで区切られたエリアをグリッドエリアと呼ぶ。

各グリッドトラックの空白スペースをグリッドギャップと呼ぶ。

グリッドの定義

親要素(#container)にdisplay:gridを指定します。
縦（列）を区切るには、grid-template-columsプロパティを利用する。
grid-template-colums:200px 1fr 200px;
「fr」というのは利用可能な残り分です。指定を1fr 1fr 1fr とすれば均等3分割された幅となりますし、2fr 1fr 1frとすれば、幅は全体の2：1：1の割合となります。

次に横（行）を区切ります。横の線は、grid-template-rowsプロパティです。
grid-template-rows:100px 1fr 100px;

#container{
display:grid;
grid-template-colums:200px 1fr 200px;
grid-template-rows:100px 1fr 100px;
}

アイテムを配置

先程定義したgridにアイテムを配置していきます。
配置には、grid-columnとgrid-rowで座標を指定する感じですね。縦と横は、それぞれ左上が基準で1となります。

.headCnt{
	grid-row:1/2;
	grid-column:1/4;
}
.leftCnt{
	grid-row:2/3;
	grid-column:1/2;
}
.midCnt{
	grid-row:2/3;
	grid-column:2/3;
}
.rightCnt{
	grid-row:2/3;
	grid-column:3/4;
}
.footCnt{
	grid-row:3/4;
	grid-column:1/4;
}

ただこれでは、後々管理が大変になることもあります。そこで視覚的に分かりやすくするために、親要素にgrid-template-areasを指定し各アイテムに名前を定義します。またスマホ対応のレスポンシブにするときにも便利になります。

#container{
display:grid;
grid-template-colums:200px 1fr 200px;
grid-template-rows:100px 1fr 100px;
grid-template-areas:
	"headCnt headCnt headCnt"
	"leftCnt midCnt rightCnt"
	"footCnt footCnt footCnt"
}
.headCnt{
	grid-area:headCnt;
}
.leftCnt{
	grid-area:leftCnt;
}
.midCnt{
	grid-area:midCnt;
}
.rightCnt{
	grid-area:rightCnt;
}
.footCnt{
	grid-area:footCnt;
}

こうすると、レスポンシブさせるときにgrid-template-areasを変更するだけで対応できます。
あと、それぞの位置を変更するのも容易です。例えば、leftCntをmidcntの下に移動させたい場合は、名前を入れ替えるだけです。カンタンですね。

@media screen and (max-width:767px){
#container{
grid-template-areas:
	"headCnt"
	"leftCnt"
	"midCnt"
	"rightCnt"
	"footCnt"
}
}

画面プレビュー

ここまででプレビューしてみます。（見やすくするためにheight=”100vh”を追加しています）
キレイにグリッドが表示されましたね。レスポンシブ対応しているので、画面幅を狭くしていけば767px以下で縦1列に並ぶことも確認できます。



それでは、ここまでで作成したHTMLとCSSを掲載。CSSについては、後述するIE11対策も追記しております。

Html



headCnt


leftCnt


midCnt


rightCnt


footCnt

CSS

#container{
display:grid;
grid-template-colums:200px 1fr 200px;
grid-template-rows:100px 1fr 100px;
grid-template-areas:
	"headCnt headCnt headCnt"
	"leftCnt midCnt rightCnt"
	"footCnt footCnt footCnt";
height:100vh; /* 画面一杯にする */
}
.headCnt{
	grid-area:headCnt;
}
.leftCnt{
	grid-area:leftCnt;
}
.midCnt{
	grid-area:midCnt;
}
.rightCnt{
	grid-area:rightCnt;
}
.footCnt{
	grid-area:footCnt;
}
@media screen and (max-width:767px){
#container{
grid-template-colums:1fr;
grid-template-rows:60px 60px auto 60px 60px;
grid-template-areas:
	"headCnt"
	"leftCnt"
	"midCnt"
	"rightCnt"
	"footCnt";
}
/* IE11対応の為 */
.headCnt{
	grid-area:headCnt;
}
.leftCnt{
	grid-area:leftCnt;
}
.midCnt{
	grid-area:midCnt;
}
.rightCnt{
	grid-area:rightCnt;
}
.footCnt{
	grid-area:footCnt;
}
}

ブラウザのサポート状況

さて、ここまで簡単に実装でき、CSSもHTMLも軽量化できましたが、ここでブラウザのサポート状況についてです。
モダンブラウザでは実装されていますが問題は、IEのサポート状況にあります。主にIE11でのサポートが不完全という事。さすがに実用させるにはこの問題をクリアしないといけません。
まず、このままではIE11では表示できていないので、恒例のベンダープレフィックス（-ms-）を付けるという事
ただこの作業は、面倒です。そこで、AutoPrefixerというツールを使用すると自動で付与させることができます。
AutoPrefixer導入については、小難しいのでググってください。ワタシが書くより遥かに良い記事がたくさんあります。

ワタシで紹介するのは、ブラウザで変換できるこのサイト（https://autoprefixer.github.io/）です。
こちらにアクセスし、CSSをペーストするだけで、ベンダープレフィックス付きのCSSが生成されます。以下がコピペで生成されたIE11対応のコードです。

#container{
display:-ms-grid;
display:grid;
grid-template-colums:200px 1fr 200px;
-ms-grid-rows:100px 1fr 100px;
    grid-template-rows:100px 1fr 100px;
    grid-template-areas:
	"headCnt headCnt headCnt"
	"leftCnt midCnt rightCnt"
	"footCnt footCnt footCnt";
height:100vh; /* 画面一杯にする */
}
.headCnt{
	-ms-grid-row:1;
	-ms-grid-column:1;
	-ms-grid-column-span:3;
	grid-area:headCnt;
}
.leftCnt{
	-ms-grid-row:2;
	-ms-grid-column:1;
	grid-area:leftCnt;
}
.midCnt{
	-ms-grid-row:2;
	-ms-grid-column:2;
	grid-area:midCnt;
}
.rightCnt{
	-ms-grid-row:2;
	-ms-grid-column:3;
	grid-area:rightCnt;
}
.footCnt{
	-ms-grid-row:3;
	-ms-grid-column:1;
	-ms-grid-column-span:3;
	grid-area:footCnt;
}
@media screen and (max-width:767px){
#container{
grid-template-colums:1fr;
-ms-grid-rows:60px 60px auto 60px 60px;
    grid-template-rows:60px 60px auto 60px 60px;
    grid-template-areas:
	"headCnt"
	"leftCnt"
	"midCnt"
	"rightCnt"
	"footCnt";
}
/* IE11対応の為 */
.headCnt{
	-ms-grid-row:1;
	-ms-grid-column:1;
	grid-area:headCnt;
}
.leftCnt{
	-ms-grid-row:2;
	-ms-grid-column:1;
	grid-area:leftCnt;
}
.midCnt{
	-ms-grid-row:3;
	-ms-grid-column:1;
	grid-area:midCnt;
}
.rightCnt{
	-ms-grid-row:4;
	-ms-grid-column:1;
	grid-area:rightCnt;
}
.footCnt{
	-ms-grid-row:5;
	-ms-grid-column:1;
	grid-area:footCnt;
}
}

IEのベンダープレフィックスは、プロパティ名が違うこともあり、これを手動で付けることは容易ではないのでこういうツールやサービスを活用して楽をしましょう。
これで、モダンブラウザ+IE11+edgeで表示することが可能となりますね。

最後に

サポートブラウザは現在モダンブラウザ+IE11+edge。IE10以下は真っ白になります。ここをサポートするサービスではまだまだ実用化は難しいです。でも将来このグリッドシステムが基本となる気もしますね。いまのうちに触って勉強しておくことが良いと思います。
ちなみにワタシはこれで、企業用の管理画面とか作りましたね。この場合、使用ブラウザは指定でき、アクセスも社内のみになるのでメンテも容易だったからです。不特定多数のサイトでは厳しいかな。

 

モバイルバージョンを終了