grid-auto-rows
A property that specifies the default row size(s) for a container.
Syntax
.grid-container {display: grid;grid-auto-rows: <row-value>;}
where <row-value>
can be one of the following:
- Grid keyword:
auto
,maxcontent
,minmax()
- Pixel value:
300px
- Percent value:
25%
- Fractional unit value:
1fr
Example 1
A container with alternating rows of 200 and 400 pixels:
.content-a-container {display: grid;grid-auto-rows: 200px 400px;}
Example 2
A container with rows that alternate between 10 and 20 percent of the height:
.content-b-container {display: grid;grid-auto-rows: 10% 20%;}