明示的なグリッドセルと暗黙的なグリッドセル

grid-template-columns および grid-template-rows、grid-template-areas でつくられたセルは明示的なグリッドセル（グリッド格子）と呼ばれる。そして、これらのプロパティの定義なしにつくられたセルは暗黙的なグリッドセルと呼ばれる。

暗黙的なグリッドセルは、何も指定しないとコンテンツに応じて幅や高さを変化させる。以下の例では grid__item05 がグリッドコンテナーの領域を超えて表示されている。

• (Demo) 暗黙的なグリッド生成 | JSFiddle

暗黙的なグリッドセルに幅や高さの制限をつけるには grid-auto-columns および grid-auto-rows を使う。たとえば grid-auto-rows を使ってセルの高さに 80px という制限を与えるには以下のようにする。

• (Demo) 暗黙的なグリッドセルに高さの制限を与える | JSFiddle

.grid {
  display: grid;
  grid-template-rows: repeat(2, 20px);
  grid-template-columns: repeat(2, 20px);
  grid-auto-rows: 80px;
}

この制限は minmax() 関数を使うことで、より柔軟に指定することができる。以下の例では grid-auto-rows: minmax(100px, auto) を指定しているが、最小のセルの高さ 100px が grid__item05 と grid__item06 に反映されていて、最大のセルの高さ auto が grid__item07 と grid__item08 に反映されている。

• (Demo) 暗黙的なグリッドセルに minmax() 関数を指定 | JSFiddle

.grid {
  display: grid;
  grid-template-rows: repeat(2, 20px);
  grid-template-columns: repeat(2, 20px);
  grid-auto-rows: 80px;
}

グリッドコンテナーの領域が決まっている状態で minmax() 関数で最大値に auto を指定した場合は、グリッドコンテナー内で収まるように最後のセルの幅や高さが決まる。以下の例ではグリッドコンテナーで余った領域が grid__item07 と grid__item08 のセルの高さになっている。

• (Demo) グリッドコンテナーの領域が決まってる状態で minmax() 関数の auto を指定 | JSFiddle