何番煎じか分からないけど、CSSのGrid Layoutについて調べてみたのでまとめてみる。

Part 1: Grid Layoutの概要
Part 2: 使い方（Grid Layoutの用語と基本）
Part 3: 使い方（グリッドコンテナ、アイテムの作り方）（イマココ）
Part 4: 実際にGrid Layoutを使ってみる
Part 5: レスポンシブデザイン対応してみる

グリッドコンテナの定義

CSSで任意の要素にdisplay: grid;を指定すると、その要素がグリッドコンテナとなる。

グリッドコンテナでは、以下の項目を定義する。

グリッド分割（分割数、それぞれのサイズ）
エリアの設定（エリアの配置内容、名前）
グリッドの各種設定（グリッドの間隔、自動配置の順序（縦or横）、etc...）

グリッド分割の定義

grid-template-columns

縦方向の分割方法の設定

grid-template-columns: 100px 1fr 2fr;

上記例では、それぞれ100px, 1fr, 2frのサイズで縦方向に3分割する。
frについては後述。

grid-template-rows

横方向の分割方法の設定

grid-template-rows: 100px 1fr;

上記例では、それぞれ100px, 1frのサイズで横方向に2分割する。

エリア設定の定義

grid-template-areas

エリアの設定

grid-template-areas:
  "header header   header"
  "menu   contents ads"
  "footer footer   footer";

上記例では、縦横3つずつ分割されたグリッドに対して、

1行目の1〜3列がheader
２行目が左からmenu, contents, ads
３行目の1〜3列がfooter

という名前でエリアを定義している。

※ `fr`について

Flexboxの flex-growと同様に、配置可能なスペースを割り当てる比率で指定出来る。
例として grid-template-columns: 100px 1fr 2fr 1fr;と指定された場合、

一番左の列は100px固定で配置
残りのスペースを、1:2:1の割合で配置といったルールでグリッドが定義される。

グリッドの各種設定

grid-gap-row、grid-gap-column、grid-gap

グリッド間隔の設定

/*　行間5px, 列間10px */
grid-gap-row: 5px;
grid-gap-column: 10px;
/* 上と同じ */
grid-gap: 5px 10px;

grid-auto-flow

空きセルに自動で配置する際の方向の設定
rowで横方向に、columnで縦方向に順次配置される。デフォルトはrow。

justify-content、align-items

Flexboxの同名プロパティと同様。justify-*が横方向、align-*が縦方向。

グリッドアイテムの定義

グリッドコンテナの直下にある要素に対して、自身の要素をグリッドコンテナで定義されたグリッドにどのように配置するかを定義する。

グリッドアイテムの配置の定義

前回説明したとおり、グリッドアイテムの配置には以下の定義方法がある。

空いているセルに自動で配置
grid-template-areasで定義したエリア名を指定して配置
行、列のラインを指定して配置

空いているセルに自動で配置

グリッドアイテムに後述のいずれかの配置指定が無い場合、空きセルに自動的に配置される。
もしくは、明示的にgrid-area: auto;を指定しても自動的に配置される。

エリア名を指定して配置

grid-area: <エリア名>;を指定することで、grid-template-areasで定義した同名のエリアに配置される。

行、列のラインを指定して配置

前回説明したとおり、行、列のラインのstart、end or spanを指定して配置する。

grid-row-start、grid-row-end、grid-column-start、grid-column-end

それぞれ、行、列の開始、終了ライン番号を指定する。

grid-row-start: <行の開始ライン>;
grid-row-end: <行の終了ライン> もしくは span <行のセル幅>;
grid-column-start: <列の開始ライン>;
grid-column-end: <列の終了ライン> もしくは span <列のセル幅>;

grid-row、grid-column

startとendを合わせて指定するショートハンド。

grid-row: <行の開始ライン> / <行の終了ライン> もしくは span <行のセル幅>;
grid-column: <列の開始ライン> / <列の終了ライン> もしくは span <列のセル幅>;

grid-area

grid-row-*、grid-column-*をまとめて指定するショートハンド。
順番はgrid-row-start / grid-column-start / grid-row-end / grid-column-end。

grid-area: <行の開始ライン> / <列の開始ライン> / <行の終了ライン> もしくは span <行のセル幅> / <列の終了ライン> もしくは span <列のセル幅>;

グリッドアイテムのその他プロパティ

justify-self、align-self