何番煎じか分からないけど、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
Flexboxの同名プロパティと同様。justify-*が横方向、align-*が縦方向。