CSS propertyGrid
grid-auto-rows
Sets the height of the rows the grid creates automatically.
- Initial value
auto- Inherited
- No
- Animatable
- yes, as a length, percentage, or fr
- Applies to
- grid containers
- JavaScript
element.style.gridAutoRows = "minmax(100px, auto)"
Example
#CSS
.cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: minmax(70px, auto);
gap: 10px;
}Example HTML
<div class="cards stage">
<div class="box">Short card</div>
<div class="box">A card with a longer description that needs more vertical space</div>
<div class="box">Third</div><div class="box">Fourth</div>
</div>Preview
Definition and usage
#The grid-auto-rows property sets the height of implicit rows. In a typical grid you only define the columns, and rows appear on their own as items are added. They all get exactly this height.
The pattern minmax(100px, auto) is especially useful: a row is at least 100px, but grows if the content needs more. This gives the cards in a grid a consistent minimum height.
Giving several values makes the heights repeat cyclically, which lets you build rhythmic gallery layouts.
Syntax
#Syntax
grid-auto-rows: <track-size>+;Values
#- Rows sized to their content.
- Every row is 80px tall.
- At least 60px, more if the content needs it.
- Row heights alternate.
Values in practice
#auto
Rows sized to their content.
.demo { grid-auto-rows: auto; }80px
Every row is 80px tall.
.demo { grid-auto-rows: 80px; }minmax(60px, auto)
At least 60px, more if the content needs it.
.demo { grid-auto-rows: minmax(60px, auto); }40px 90px
Row heights alternate.
.demo { grid-auto-rows: 40px 90px; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#minmax(Xpx, auto)gives cards an equal minimum height, without risking that longer content gets cut off.- Rows from
grid-template-rowstake priority;grid-auto-rowsonly applies to the extra ones.
Related entries
#Spotted a mistake or missing an example? Write to us.