grid-auto-rows
Sets the size of implicitly created rows. Applied when rows not defined by grid-template-rows are automatically generated.
Class List
| Class | CSS | Description |
|---|---|---|
gar1fr | grid-auto-rows: 1fr | Creates implicit rows at equal proportions |
gar5rem | grid-auto-rows: 5rem | Creates implicit rows at 50px (5rem) size |
gar10rem | grid-auto-rows: 10rem | Creates implicit rows at 100px (10rem) size |
gar100px | grid-auto-rows: 100px | Creates implicit rows at 100px fixed size |
Usage Examples
Controls the height of additionally created rows when there are more items than defined rows.
<!-- 3-column grid + implicit row height -->
<div class="dg gtcr3-1fr gar10rem gap16px">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4 (new row, 100px height)</div>
<div>5</div>
</div>
<!-- Equal height rows -->
<div class="dg gtcr2-1fr gar1fr gap16px">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>Visual Comparison
Default (auto) -- Fits content
1234
Row height is automatically determined by content
gar10rem — gar10rem
1234
All rows are fixed at 100px (10rem) height
Tips & Notes
Useful in card grids
In grids with a variable number of items like card lists, setting gar keeps all row heights consistent.
gtr vs gar
gtr(grid-template-rows) controls explicit rows, while gar controls implicitly added rows. If the number of items is variable, gar is more appropriate.