明示的なグリッドセルと暗黙的なグリッドセル
grid-template-columns
および grid-template-rows
、grid-template-areas
でつくられたセルは明示的なグリッドセル(グリッド格子)と呼ばれる。そして、これらのプロパティの定義なしにつくられたセルは暗黙的なグリッドセルと呼ばれる。
暗黙的なグリッドセルは、何も指定しないとコンテンツに応じて幅や高さを変化させる。以下の例では grid__item05
がグリッドコンテナーの領域を超えて表示されている。
- (Demo) 暗黙的なグリッド生成 | JSFiddle
暗黙的なグリッドセルに幅や高さの制限をつけるには grid-auto-columns
および grid-auto-rows
を使う。たとえば grid-auto-rows
を使ってセルの高さに 80px
という制限を与えるには以下のようにする。
.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
に反映されている。
.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
のセルの高さになっている。