Grid Layout は、ウェブサイトのレイアウトを構築するための CSS モジュールです。格子状の表のようなセルを構成し、それらを組み合わせたり、順番を入れ替えたりすることで、様々なレイアウトが可能になります。
割合簡単で自由度が高いのでとても便利なのですが、残念なことにIE11 などの古いブラウザは新しい仕様に対応していません。（ベンダープレフィックスでの記述など調整が必要になります。「Grid Layout を使いこなす – その５」 で方法をまとめます。）
今回は Grid Layout の基本的な考え方、利用の仕方についてまとめます。
「Grid Layout を使いこなす」全6回です。
⇒ その１ 基本（今回）
⇒ その２ トラック、領域の値
⇒ その３ 基本以外のプロパティ
⇒ その４ ショートハンド
⇒ その５ IE 対応
⇒ その６ まとめ
Grid Layout について
このようなシンプルな HTML をレイアウトすることを考えていきます。
<div>
<div>ヘッダー</div>
<div>ナビ</div>
<div>コンテンツ A</div>
<div>コンテンツ B</div>
</div>
↓ の左の図のように、特にレイアウトをかけないと、それぞれの要素は縦方向に順に並びます。
右の図のように CSS でレイアウトするには、Flexbox や、Float を利用することでも実現できますが、今回は Grid Layout で実現します。
Grid Layout の基本的な考え方です。
↓の左の図を見てください。表を描くように、線を引いて、格子状にマス目を作ります。それぞれの線には番号が振られます。列（横方向）は左から右へ、行は（縦方向）は上から下へ。この線をライン、マス目をセル、列や行をトラックと呼びます。
右の図を見てください。このセルに合わせる形で、アイテム（それぞれの子要素）の領域を決めていきます。全てのアイテムを、コンテナ（親要素）で包みます。
Grid Layout の基本となるプロパティ
| プロパティ | 役割 |
|---|---|
| display: grid | 親要素（コンテナ）で、コンテナの作成を指示 |
| grid-template-rows | 親要素（コンテナ）で、各行トラックの高さを指定 |
| grid-template-columns | 親要素（コンテナ）で、各列トラックの幅を指定 |
| grid-row | 子要素（アイテム）で、そのアイテムの行の領域を指定 |
| grid-column | 子要素（アイテム）で、そのアイテムの列の領域を指定 |
Grid Layout 手順 ① レイアウトを決める
表を作るように、各トラックの値を決めます。
セルを埋めるように、アイテムの領域を決めます。
トラックの値には、px などの長さを表す単位や % が使えるほか、残りのスペースをフレックスに指定する fr も利用できます。
＜fr の使い方＞
例えば、この図の場合、行を見てみると、1トラック目は 200px で、2トラック目、3トラック目は残りを均等に割与えています。その部分は、どちらも 1fr を指定します。
仮に、2トラック目が3トラック目の倍の高さに指定する場合、2行目は 2fr、3行目は 1fr となります。
この図の列は、1トラック目が300px、2トラック目は 1fr なので、2トラック目は残り全部となります。
Grid Layout 手順 ② CSS を記述する
CSS 親要素（コンテナ）
.wrapper {
display: grid; /* コンテナ作成 */
grid-template-rows: 200px 1fr 1fr; /* 各行トラック高さ */
grid-template-columns: 300px 1fr; /* 各列トラック幅 */
}
grid-template-rows: 1トラック目 2トラック目・・・;
grid-template-coloums: 1トラック目 2トラック目 ・・・;
という具合に記述します。それぞれの値の間には半角スペースを挟みます。
CSS 子要素（アイテム）
.header { /* ヘッダークラス */
grid-row: 1 / 2; /* 行の領域 */
grid-column: 1 / 3; /* 列の領域 */
}
.navi { /* ナビクラス */
grid-row: 2 / 4; /* 行の領域 */
grid-column: 1 / 2; /* 列の領域 */
}
.content-a { /* コンテンツAクラス */
grid-row: 2 / 3; /* 行の領域 */
grid-column: 2 / 3; /* 列の領域 */
}
.content-b { /* コンテンツBクラス */
grid-row: 3 / 4; /* 行の領域 */
grid-column: 2 / 3; /* 列の領域 */
}
アイテムごとに、クラスを作り、領域を指定します。
レイアウト図のライン番号に注目してください。
grid-row: 行の領域の開始するライン番号 / 行の領域の終了するライン番号;
grid-column: 列の領域の開始するライン番号 / 列の領域の終了するライン番号;
というように記述します。
開始ライン番号と終了ライン番号の間には / （スラッシュ）を挟みます。
終了ライン番号を省略した場合、領域は1トラックとみなされます。
Grid Layout 手順 ③ HTML にクラスを指定
あとは、CSS で作成したクラスを、HTMLのそれぞれの要素に指定します。
<div class="wrapper">
<div class="header">ヘッダー</div>
<div class="navi">ナビ</div>
<div class="content-a">コンテンツ A</div>
<div class="content-b">コンテンツ B</div>
</div>
サンプルページ
grid-layout.html
基本は以上ですが、次回、Grid Layout のより細かな設定の仕方をまとめたいと思います。
⇒ Grid Layout を使いこなす – その２ トラック、領域の値