The grid-template-rows CSS property specifies the track list for the grid's rows.
Syntax
CSS
grid-template-rows: value;
JS
object.style.gridTemplateRows = "value";
Values
<'grid-template-rows'> = none | <track-list> | <auto-track-list>
none
Indicates that no explicit grid tracks are created by this property (though explicit grid tracks could still be created by grid-template-areas).
<track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
<line-names> = '[' <custom-ident>* ']'
<custom-ident>
Specifies any valid identifier that is not misinterpreted as a keyword.
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( <length-percentage> )
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
auto
Automatically specified by the user agent.
<flex>
A non-negative dimension with the unit fr specifying the track's flex factor.
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
max-content
Represents the largest max-content contribution of the items occupying the track.
min-content
Represents the largest min-content contribution of the items occupying the track.
minmax(min, max)
Defines a size range greater than or equal to min and less than or equal to max.
<inflexible-breadth> = <length-percentage> | min-content | max-content | auto
auto
Automatically specified by the user agent.
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
max-content
Represents the largest max-content contribution of the items occupying the track.
min-content
Represents the largest min-content contribution of the items occupying the track.
fit-content()
Represents the formula max(minimum, min(limit, max-content)), where minimum represents an auto minimum (which is often, but not always, equal to a min-content minimum), and limit is the track sizing function passed as an argument to fit-content(). This is essentially calculated as the smaller of minmax(auto, max-content) and minmax(auto, limit).
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<track-repeat> = repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )
repeat()
Represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form.
<integer>
Specifies one or more decimal digits (0-9).
<line-names> = '[' <custom-ident>* ']'
<custom-ident>
Specifies any valid identifier that is not misinterpreted as a keyword.
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( <length-percentage> )
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
auto
Automatically specified by the user agent.
<flex>
A non-negative dimension with the unit fr specifying the track's flex factor.
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
max-content
Represents the largest max-content contribution of the items occupying the track.
min-content
Represents the largest min-content contribution of the items occupying the track.
minmax(min, max)
Defines a size range greater than or equal to min and less than or equal to max.
<inflexible-breadth> = <length-percentage> | min-content | max-content | auto
auto
Automatically specified by the user agent.
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
max-content
Represents the largest max-content contribution of the items occupying the track.
min-content
Represents the largest min-content contribution of the items occupying the track.
fit-content()
Represents the formula max(minimum, min(limit, max-content)), where minimum represents an auto minimum (which is often, but not always, equal to a min-content minimum), and limit is the track sizing function passed as an argument to fit-content(). This is essentially calculated as the smaller of minmax(auto, max-content) and minmax(auto, limit).
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<auto-track-list> = [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
<line-names> = '[' <custom-ident>* ']'
<custom-ident>
Specifies any valid identifier that is not misinterpreted as a keyword.
<fixed-size> = <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )
<fixed-breadth> = <length-percentage>
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
minmax(min, max)
Defines a size range greater than or equal to min and less than or equal to max.
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
auto
Automatically specified by the user agent.
<flex>
A non-negative dimension with the unit fr specifying the track's flex factor.
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
max-content
Represents the largest max-content contribution of the items occupying the track.
min-content
Represents the largest min-content contribution of the items occupying the track.
<inflexible-breadth> = <length-percentage> | min-content | max-content | auto
auto
Automatically specified by the user agent.
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
max-content
Represents the largest max-content contribution of the items occupying the track.
min-content
Represents the largest min-content contribution of the items occupying the track.
<fixed-repeat> = repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
repeat()
Represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form.
<integer>
Specifies one or more decimal digits (0-9).
<fixed-size> = <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )
<fixed-breadth> = <length-percentage>
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
minmax(min, max)
Defines a size range greater than or equal to min and less than or equal to max.
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
auto
Automatically specified by the user agent.
<flex>
A non-negative dimension with the unit fr specifying the track's flex factor.
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
max-content
Represents the largest max-content contribution of the items occupying the track.
min-content
Represents the largest min-content contribution of the items occupying the track.
<inflexible-breadth> = <length-percentage> | min-content | max-content | auto
auto
Automatically specified by the user agent.
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
max-content
Represents the largest max-content contribution of the items occupying the track.
min-content
Represents the largest min-content contribution of the items occupying the track.
<line-names> = '[' <custom-ident>* ']'
<custom-ident>
Specifies any valid identifier that is not misinterpreted as a keyword.
<auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
repeat()
Represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form.
auto-fill
If the grid container has a definite size or max size in the relevant axis, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow the content box of its grid container (treating each track as its max track sizing function if that is definite or as its minimum track sizing function otherwise, flooring the max track sizing function by the min track sizing function if both are definite, and taking gap into account); if any number of repetitions would overflow, then 1 repetition. Otherwise, if the grid container has a definite min size in the relevant axis, the number of repetitions is the smallest possible positive integer that fulfills that minimum requirement. Otherwise, the specified track list repeats only once.
auto-fit
The same as auto-fill, except that after grid item placement any empty repeated tracks are collapsed.
<line-names> = '[' <custom-ident>* ']'
<custom-ident>
Specifies any valid identifier that is not misinterpreted as a keyword.
<fixed-size> = <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )
<fixed-breadth> = <length-percentage>
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
minmax(min, max)
Defines a size range greater than or equal to min and less than or equal to max.
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
auto
Automatically specified by the user agent.
<flex>
A non-negative dimension with the unit fr specifying the track's flex factor.
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
max-content
Represents the largest max-content contribution of the items occupying the track.
min-content
Represents the largest min-content contribution of the items occupying the track.
<inflexible-breadth> = <length-percentage> | min-content | max-content | auto
auto
Automatically specified by the user agent.
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
max-content
Represents the largest max-content contribution of the items occupying the track.
min-content
Represents the largest min-content contribution of the items occupying the track.
Initial
none
