grid-template-rows は縦方向、grid-template-columns は横方向のグリッド線間の幅を指定します。

none

明示的なグリッドを指定しません。グリッドの間隔は grid-auto-rows, grid-auto-columns に従います。

<line-names>

グリッド線に名前をつけます。下記の例では 1本目のグリッド線に line1、2本目に line2、3本目に line3 という名前を付けています。

CSS

grid-template-columns: [line1] 8rem [line2] 8rem [line3];

<length>

4rem などの長さを指定します。

<percentage>

30% などのパーセントを指定します。

<flex>

1fr などのフレックス値を指定します。

min-content

内包するコンテンツの最小サイズを意味します。

max-content

内包するコンテンツの最大サイズを意味します。

auto

サイズを自動調整します。

minmax(<min>, <max>)

<min> 以上 <max> 以下の範囲で自動調整します。

fit-content(<limit>)

内包するコンテンツのサイズが小さければそのサイズで、大きければ最大 <limit> のサイズにします。

repeat(<repetitions>, [ [<line-names>] <size> ]... [<line-names>])

繰り返しを指定します。<repetitions> には繰り返し回数を指定します。

CSS

grid-template-columns: repeat(4, 4rem);                  // => 4rem 4rem 4rem 4rem
grid-template-columns: repeat(2, 3rem 4rem);             // => 3rem 4rem 3rem 4rem
grid-template-columns: repeat(2, 1rem) repeat(2, 2rem);  // => 1rem 1rem 2rem 2rem

最後の <repetitions> には auto-fill または auto-fit を指定できます。両者は非常に似ていますが、auto-fit がアイテムを子要素個数分のみ生成するのに対して、auto-fill は余ったスペースに非表示のアイテムを自動的に生成します。

CSS

.grid-container {
  display: grid;
  justify-content: center;
}
.auto-fit {
  grid-template-columns: repeat(auto-fit, 10rem);
}
.auto-fill {
  grid-template-columns: repeat(auto-fill, 10rem);
}

表示

auto-fit

A

B

C

D

auto-fill

A

B

C

D

• grid
• grid-template
• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid-auto-rows
• grid-auto-columns
• grid-auto-flow
• grid-row
• grid-column
• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end
• grid-area

• https://drafts.csswg.org/css-grid/#track-sizing
• https://developer.mozilla.org/ja/docs/Web/CSS/grid-template-rows
• https://caniuse.com/#search=grid-template-rows