CSSのGrid Layout Module（以下、Grid Layout）とは、ウェブサイトのレイアウトを構築するための新しい仕様です。今まではウェブサイトのレイアウトを実現するために、floatやFlexboxを使っていた方が多いのではないでしょうか。
Grid Layoutを使えば、HTML要素の構造を汚さず、従来の手法に比べてウェブサイトのレイアウトがつくりやすくなります。例えばfloatだと親要素にdivを増やす必要があったのが、Grid Layoutを使えばそのような無駄なHTML要素を増やさなくて構わなくなります。
今回はレイアウトをつくりながら、Grid Layoutの基礎知識について紹介します。余裕のある方は、記事を読みながら実際に手を動かしてレイアウトをつくってみましょう。
この記事で学べること
・Grid Layoutの基本的な使い方
・Grid Layoutの利点
・IE 10以上のブラウザにGrid Layoutを対応させる方法
よくあるレイアウトをつくりながらGrid Layoutの基礎を学ぶ
次のようなヘッダー・メインコンテンツ・左右のサイドバー・フッターがあるレイアウトを例に解説していきます。
<div class="container"> <header class="header">header</header> <main class="main" >main</main> <aside class="aside" >aside</aside> <nav class="nav" >nav</nav> <footer class="footer">footer</footer> </div>
まずHTMLを書きます。配置する各要素と、それを囲む親要素があります。親要素にはcontainer というクラス名を付けました。
Flexboxで作る場合は
Flexboxを使ってこのレイアウトをつくる場合、横並びにしたい要素（aside、main、nav）をdivなどで囲んでフレックスコンテナをつくり、横並びにする要素をフレックスアイテムとして配置します。
わざわざdivを追加する必要があるため、余計な要素が一つ増えますよね。
Grid Layoutで作る場合は
Grid Layoutはレイアウトを囲むコンテナの要素（例では.container）にその子要素の配置の仕方を指定していきます。Flexboxと違い、要素を並べる行・列コンテナとなる要素を用意する必要はありません。
Grid Layoutのコンテナとアイテムについて説明しながらCSSでレイアウトをつくっていきます。
グリッドコンテナ
グリッドレイアウトで要素を配置するためにグリッドコンテナをつくります。要素に display: grid を指定すると、その要素はグリッドコンテナになります。(インライン要素として扱うときはdisplay: inline-gridを指定します)
.container {
display: grid;
}
これだけではまだ要素がただ並んでいるだけです。そこで、グリッドコンテナにグリッドコンテナを分割するための指定をします。
グリッドコンテナを縦・横に分割します。縦方向に分割した各列のサイズはgrid-template-columns 、横方向に分割した各行のサイズはgrid-template-rows で指定します。
列の幅を指定しましょう。今回のレイアウトでは、左のサイドバーの幅が180px、右のサイドバーの幅が160pxです。中央のメインエリアは親要素の幅から左右のサイドバーの幅を引いた可変幅にします。
ここで、メインエリアの幅指定にfrという単位を使います。frはグリッドコンテナの中を分割するサイズの指定に使える単位です。全体の幅からfr以外の単位(pxや%など)で指定したものを引き、残りの幅がfrで指定された列に配分されます。Flexboxのflex-growプロパティと同じようなイメージです。今回は、全体の幅から左右サイドバー（180px、160px）の幅を引いた幅をメインエリアに配分したいので次のように書きます。
.container {
display: grid;
/* 1列目から順番に180px、1fr、160pxの幅 */
grid-template-columns: 180px 1fr 160px;
}同じように各行の高さも指定していきます。
.container {
display: grid;
/* 1列目から順番に180px、1fr、160pxの幅 */
grid-template-columns: 180px 1fr 160px;
/* 1行目から順番に60px 1fr 90pxの高さ */
grid-template-rows: 60px 1fr 90px;
}このときの列・行のことをグリッドトラックといいます。列・行を分割した線をグリッドラインといいます。グリッドラインは、borderのように見た目上の線ではありません。
グリッドアイテム
グリッドアイテムを配置していきます。グリッドコンテナ直下の子要素をグリッドアイテムといいます。今回の場合は、ヘッダー・メインコンテンツ・左右のサイドバー・フッターがグリッドアイテムです。
グリッドトラックを分割したグリッドラインは、1本目から順番に1,2,3…と自動的に番号がふられます。grid-column-startとgrid-column-endで、グリッドアイテムが列の何本目から何本目のグリッドラインまで配置するか指定します。
同じようにgrid-row-startとgrid-row-endで行の何本目から何本目のグリッドラインまで配置するか指定します。
.header {
/* 列の1本目から4本目のグリッドラインまで */
grid-column-start: 1;
grid-column-end: 4;
/* 行の1本目から2本目のグリッドラインまで */
grid-row-start: 1;
grid-row-end: 2;
}このとき、grid-column-end・grid-row-endにautoを指定すると、それぞれgrid-column-startやgrid-row-startで指定したグリッドラインの次のグリッドラインまでの範囲に配置されます。ヘッダーのgrid-row-endの指定はautoにできます。
.header {
/* 列の1本目から4本目のグリッドラインまで */
grid-column-start: 1;
grid-column-end: 4;
/* 行の1本目から2本目のグリッドラインまで */
grid-row-start: 1;
grid-row-end: auto;
}同じように他のグリッドアイテムも配置していきます。
.header {
/* 列の1本目から4本目のグリッドラインまで */
grid-column-start: 1;
grid-column-end: 4;
/* 行の1本目から2本目のグリッドラインまで */
grid-row-start: 1;
grid-row-end: auto;
}
.main {
/* 列の2本目から3本目のグリッドラインまで */
grid-column-start: 2;
grid-column-end: auto;
/* 行の2本目から3本目のグリッドラインまで */
grid-row-start: 2;
grid-row-end: auto;
}
.aside {
/* 列の1本目から2本目のグリッドラインまで */
grid-column-start: 1;
grid-column-end: auto;
/* 行の2本目から3本目のグリッドラインまで */
grid-row-start: 2;
grid-row-end: auto;
}
.nav {
/* 列の3本目から4本目のグリッドラインまで */
grid-column-start: 3;
grid-column-end: auto;
/* 行の2本目から3本目のグリッドラインまで */
grid-row-start: 2;
grid-row-end: auto;
}
.footer {
/* 列の1本目から4本目のグリッドラインまで */
grid-column-start: 1;
grid-column-end: 4;
/* 行の3本目から4本目のグリッドラインまで */
grid-row-start: 3;
grid-row-end: auto;
}grid-column-startとgrid-column-endはgrid-column、grid-row-startとgrid-row-endはgrid-rowという略式プロパティで指定できます。このとき、autoは省略できます。今回の .headerはこのように略式プロパティで書き換えることができます。
.header {
/* 列の1本目から4本目のグリッドラインまで */
grid-column: 1 / 4;
/* 行の1本目から2本目のグリッドラインまで */
grid-row: 1;
}これでレイアウトは完成です。以下のサンプルでコードと表示を確認してみてください。
次のページではタイル状のレイアウトを例にしたGrid Layoutのサンプルや、対応ブラウザ状況について紹介します。
