WEBサイトのレイアウトでは最新方法であるgridレイアウト。
IEやsafariで一部未対応のプロパティもありますが、主だったブラウザはほぼ対応してきたように思います。
gridレイアウトとよく対比に使われるのがflexレイアウトですが、flexが列または行、一方向に配置していくレイアウトであるのに対して、girdレイアウトは列、行の両方を意識した二次元レイアウトが可能になった配置方法です。
たとえばflexで
のようなレイアウトは作れても、
のようなレイアウトを実現することは出来ません。
gridの二次元配置がなんとなくイメージできたところで、基本的なgridレイアウトの作り方を見ていきます。
グリッド枠を作りボックスを当てはめていく
flexレイアウトが、子要素の数に応じて自動的に整列されるのに対し、gridレイアウトは先に設計図にあたるグリッド枠を指定します。
例として、「横３列 / 縦２行(height 60px)」という枠組みを指定してみます。
div{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 60px 60px;
}gridレイアウトを適用するコンテナに display: grid; を指定。
横方向（列）は grid-template-columns、縦方向（行）は grid-tenplate-rowsでそれぞれ指定します。
すると下のようになります。
frとrepeat関数
サンプルで出てきたfr とrepeat について補足しておきます。
「fr」（フレーム）はgridレイアウトで使用できる単位で、gridコンテナから「pxなどで明確に指定された幅（高さ）を引いた残り」をfrで指定されたボックスで分け合います。
frだけを使うと単純にwidth（height）を等分します。
仮に「2fr 1fr 1fr」とすれば、２：１：１の割合でグリッド枠を構築しますし、「200px 1fr」とすれば、gridコンテナから200px引いた残りが1frとなります。
上サンプルのgrid-template-columnsではrepeat関数を使っています。直感的に分かると思いますが、repeat(3, 1fr) で、「1fr を３回繰り返す」という意味です。repeat関数を使わなければ「1fr 1fr 1fr」となります。
逆に、grid-template-rowsは repeat(2, 60px) と書くことも出来ます。
なお、縦方向（grid-template-rows）は省略することも可能です。
grid-template-rowsを省略した場合は、コンテンツから高さが計算され自動的に最大の高さを持つアイテムに合わせられます。
グリッドにしたがってレイアウトされる
グリッド枠が作成できると、子要素はグリッドに従って前から順番にレイアウトされます。子要素がブロック要素であろうとインライン要素であろうと関係なく、全ての兄弟要素がグリッド枠に当てはめられたレイアウトになります。
下のサンプルはブロックレベル、インラインレベルを混ぜていますが、全てグリッドに従ってレイアウトされているのが分かります。
See the Pen grid sample-1 by Takashi Abe (@TakeshiAbe) on CodePen.
しかし、これではflexレイアウトと大差ありません。
次章ではgridレイアウトならではの二次元的レイアウトの作り方を見ていきます。
[grid_under/]
