グリッドコンテナの定義

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

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

グリッド分割の定義

縦方向の分割方法の設定

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

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

横方向の分割方法の設定

grid-template-rows: 100px 1fr;

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

エリアの設定

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

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

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

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

グリッド間隔の設定

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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