Flexbox & Grid
grid-rows
Create equal grid rows and fill them column by column.
Overview
| Class | Declarations |
|---|---|
grid-rows:3 | display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(3, minmax(0, 1fr));
|
Basic usage
Create equal rows
grid-rows:3 sets display:grid, grid-auto-flow:column and three equal rows using repeat(3,minmax(0,1fr)). Six items fill down the first column, then down the second. A 224px container leaves 192px after its two 16px row gaps, producing three 64px rows.
Create equal rows
Follow the numbers down each column. The fixed container height makes the equal row sizes measurable.
<div id="layout" class="grid-rows:3 grid-auto-columns:1fr gap-md h:14rem w:17.5rem max-w:100%"> <div id="target" class="p-sm">01</div> <div id="peer" class="p-sm">02</div> <div id="item-3" class="p-sm">03</div> <div id="item-4" class="p-sm">04</div> <div id="item-5" class="p-sm">05</div> <div id="item-6" class="p-sm">06</div></div>Generated CSS
@layer utilities { .grid-rows\:3 { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, minmax(0, 1fr)) }}The explicit height gives fractional rows a definite space to divide. Without it, row heights depend on content. Here implicit columns use 1fr so both columns share the available width.
Apply conditionally
Use conditional queries to change the layout at a real viewport width. Two rows initially produce three columns of items. From sm, three rows produce two columns. Height and source order stay the same while the rows change from 104px to 64px.
Apply conditionally
Follow the numbers down each column. The fixed container height makes the equal row sizes measurable.
<div id="layout" class="grid-rows:2 grid-auto-columns:1fr gap-md h:14rem w:17.5rem max-w:100% grid-rows:3@sm"> <div id="target" class="p-sm">01</div> <div id="peer" class="p-sm">02</div> <div id="item-3" class="p-sm">03</div> <div id="item-4" class="p-sm">04</div> <div id="item-5" class="p-sm">05</div> <div id="item-6" class="p-sm">06</div></div>