CSS - grid-template-rows

トップ > CSSリファレンス > grid-template-rows

概要

属性名 grid-template-rows
grid-template-columns
none | <track-list> | <auto-track-list>
値の詳細 <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
<auto-track-list> =
  [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat>
  [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
<track-size> = <track-breadth> | minmax(<min>, <max>) | fit-content(<limit>)
<fixed-size> = <fixed-breadth> | minmax(<fixed-min>, <max>) | minmax(<min> , <fixed-max>)
<min> = <inflexible-breadth>
<max> = <track-breadth>
<fixed-min> = <fixed-breadth>
<fixed-max> = <fixed-breadth>
<limit> = <length-percentage>
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length-percentage> | min-content | max-content | auto
<fixed-breadth> = <length-percentage>
<track-repeat> = repeat([ <integer [1,∞]> ], [ <line-names>? <track-size> ]+ <line-names>?)
<fixed-repeat> = repeat([ <integer [1,∞]> ], [ <line-names>? <fixed-size> ]+ <line-names>?)
<auto-repeat> = repeat([auto-fill | auto-fit], [ <line-names>? <fixed-size> ]+ <line-names>?)
<line-names> = [ <custom-ident>* ]
<length-percentage> = <length> | <percentage>
初期値none
適用可能要素グリッドコンテナ
継承継承しない

サポート (説明)

CSSIEEdgeFirefoxChromeOperaSafari
CSS3×1652574410.1

説明

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

関連項目

リンク


Copyright (C) 2019 杜甫々
初版:2019年12月30日、最終更新:2019年12月30日
http://www.tohoho-web.com/css/prop/grid-template-rows.htm