Flexbox & Grid
grid-auto-rows
Size rows created outside the explicit grid track list.
Overview
| Class | Declarations |
|---|---|
grid-auto-rows:auto | grid-auto-rows: auto;
|
grid-auto-rows:min-content | grid-auto-rows: min-content;
|
grid-auto-rows:max-content | grid-auto-rows: max-content;
|
grid-auto-rows:<value> | grid-auto-rows: <value>;
|
grid-auto-rows:minmax(<min-content>,<max-content>) | grid-auto-rows: minmax(<min-content>,<max-content>);
|
Basic usage
Size implicit rows
grid-auto-rows sizes rows outside the explicit track list. The first row below is explicitly 48px tall. With two columns and five items, auto-placement creates two more rows, each 64px tall. The blue item is in the first implicit row.
Size implicit rows
The first row is explicit. The blue item belongs to an implicit row created for additional content.
<div id="layout" class="grid grid-cols:2 grid-auto-rows:64px grid-template-rows:48px gap-md w:17.5rem max-w:100%"> <div id="peer" class="p-sm">01</div> <div id="item-2" class="p-sm">02</div> <div id="target" class="p-sm">03</div> <div id="item-4" class="p-sm">04</div> <div id="item-5" class="p-sm">05</div></div>An unfilled cell does not remove its row. The last row still receives the 64px implicit size, while the explicit 48px row remains unchanged.
Apply conditionally
Use conditional queries to change the layout at a real viewport width. The explicit row stays 48px. From sm, the two implicit rows increase from 56px to 80px, so the container grows naturally.
Apply conditionally
The first row is explicit. The blue item belongs to an implicit row created for additional content.
<div id="layout" class="grid grid-cols:2 grid-auto-rows:56px grid-template-rows:48px gap-md w:17.5rem max-w:100% grid-auto-rows:80px@sm"> <div id="peer" class="p-sm">01</div> <div id="item-2" class="p-sm">02</div> <div id="target" class="p-sm">03</div> <div id="item-4" class="p-sm">04</div> <div id="item-5" class="p-sm">05</div></div>