Grid Layout の基本と使いどころ

CSS Grid Layout が便利だと聞いたのですが、
なかなか理解できなかったのできちんと調べてみました

ので、今回は Grid Layout のお話です

CSS Grid Layout とは

・レイアウトを組むための CSS の機能
・縦横のマス目に配置してゆく
・各マスの大きさを自由に設定できる（素敵）
・マスへの配置順指定や、マスの結合もできる

マスマス言ってますが、正しくはセル・エリア（セルの集合体）です

CSS Grid Layout の使い方

ざっくりとした流れ
①コンテナに display: grid; を指定
②コンテナに grid-template-* を指定
③各アイテムに grid-row, grid-column を指定

①コンテナに display: grid; を指定

HTML はこんな感じにしてみます
Grid Layout にはコンテナ（グリッド全体）とアイテム（配置したい要素）が必要なので、安易にクラス名を付けました

<div class="container">
    <div class="item">アイテム1</div>
    <div class="item">アイテム2</div>
    <div class="item">アイテム3</div>
</div>

次に、コンテナに CSS を当てていきます
display: gird; を記述します

.container {
    display: grid;
    height: 400px;
    width: 400px;
}

親要素である container に height の指定をしたため、子要素の item たちが均等に height を持っています

ちょっとわかりづらいので背景色をつけました

.item:nth-child(1) {
    background: lightGray;
} 
.item:nth-child(2) {
    background: lightBlue;
}
.item:nth-child(3) {
    background: yellow;
}

②コンテナに grid-template-* を指定

次に、各マスのサイズを決めるため、コンテナを分割します
分割するために grid-template-rows と grid-template-columns という2つのプロパティを使います

grid-template-rows : 横方向に分割した時の各行のサイズ
grid-template-columns : 縦方向に分割した時の各列のサイズ

ちとわかりづらいのでそれぞれ試してみます
まずは grid-template-rows です

.container {
    display: grid;
    height: 400px;
    width: 400px;
    grid-template-rows: 100px 200px 1fr;
}

各行のサイズが上から 100px, 200px, 1fr となっています
次は grid-template-columns です

.container {
    display: grid;
    height: 400px;
    width: 400px;
    grid-template-columns: 100px 200px 1fr;
}

各列のサイズが左から 100px, 200px, 1fr となりました

ちなみに、fr はコンテナを分割する時に使える単位で、全体の幅 / 高さから px などで指定済みのものを引いた残りを、fr を指定した列 / 行に均等に配分してくれるいい感じの子です。レスポンシブ対応で活きそうです

（今回で言うと、親要素 400px から、サイズを指定済みのアイテム1の 100px、アイテム2の 200px を引くと 100px。fr 指定しているのはアイテム3だけですので、そのまま 100px がアイテム3のサイズとなります）

話を戻しまして、両方を組み合わせてみるとこんな感じです

.container {
    display: grid;
    grid-template-rows: 100px 200px 1fr;
    grid-template-columns: 100px 200px 1fr;
    height: 400px;
    width: 400px;
}

今は1行目に全てのアイテムが収まっていますが、次にこれを任意の場所（エリア）に配置できるよう、指定していきます

③各アイテムに grid-row, grid-column を指定

列 / 行の各線（グリッドライン）には上 / 左から順番が振られています
grid-row-start, grid-row-end, grid-column-start, grit-column-end というプロパティとこのグリッドラインの番号を使うことで、アイテムを好きなエリアに配置することができます

grid-*-start : アイテムを配置する初めのグリッドラインを指定
grid-*-end : アイテムを配置する終わりのグリッドラインを指定

たとえば、アイテム3を中央に配置したい時にはこのようになります

.item:nth-child(3) {
    background: yellow;
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
}

これぞグリッドレイアウトの真骨頂って感じですね、すごい
フレックスボックスで同じことやろうとするとかなり骨が折れそうです

なお、grid-*-start, grid-*-end は row と column でそれぞれ grid-row, grid-column という略式プロパティで指定することもできます

.item:nth-child(3) {
    background: yellow;
    grid-row: 2;
    grid-column: 2;
}

start と end の差が1の時、end の値は省略可能です
記述量が少なくすむので、こちらで慣れてしまった方がよさそうです

また、start と end の差を1以上にした時、複数セルを結合したエリアに配置することができますが、その場合も略式プロパティで指定可能です

.item:nth-child(2) {
    background: lightBlue;
    grid-row: 3;
    grid-column: 2 / 4;
}

アイテム2 を row 3〜4、column 2〜4（start の値に続き「 / end の値」を記述することで end を指定可能）に指定しました

column を2つのセルを跨ぐように指定したため、アイテム2 の横幅が 200px + 1fr (今回は 100px )で 300px となりました

また、row をアイテム3より大きい値で指定したため、列における順番がアイテム1→3→2となりました
んーHTML の記述順すら覆してしまうんですね。この辺は気をつけておかないと、後から変更する時に苦労する予感がします

以上が基本の使い方となります。理解してしまえばとても使い勝手がよいですね！

CSS Grid Layout の対応状況

Can I use で確認したところ、Edge, Firefox, Chrome, Safari などの最近のバージョンであれば利用できます
IE も10以降はベンダープレフィックスを付ければ使えるのですが、「Partial support in IE refers to supporting an older version of the specification.」とあり、その他のブラウザと同じように使えるわけではないようです。IE 対応が必要な時に使うのは少し危険そうです

CSS Grid Layout (level 1) | Can I use... Support tables for HTML5, CSS3, etc

まとめ

簡単な指定で思い通りに配置ができるのはかなり爽快ですね！
タイル型レイアウトを実現する際や、レスポンシブ対応をする際などに鬼のように役立ちそうです
特にタイル型レイアウト。1アイテムだけサイズを変えたり、特定の箇所で1アイテム分空白にして配置したい時など、フレックスボックスだと実現が困難なレイアウトを難なく実現できるのが素敵です

今回の内容以上にできることがあるので、チートシート等活用しながら使いこなしていきたいです