grid-template-rows
Define explicit row sizes, fractions and content minimums.
Overview
| Class | Declarations |
|---|---|
grid-template-rows:none | grid-template-rows: none;
|
grid-template-rows:min-content | grid-template-rows: min-content;
|
grid-template-rows:max-content | grid-template-rows: max-content;
|
grid-template-rows:48px|80px|48px | grid-template-rows: 48px 80px 48px;
|
grid-template-rows:repeat(3,1fr) | grid-template-rows: repeat(3,1fr);
|
grid-template-rows:fit-content(12rem) | grid-template-rows: fit-content(12rem);
|
grid-template-rows:minmax(48px,auto)|1fr | grid-template-rows: minmax(48px,auto) 1fr;
|
Basic usage
Define explicit rows
grid-template-rows defines explicit row sizes. These three rows are 48px, 80px and 48px tall. With two 16px gaps, the grid’s natural height is 208px; the middle row is visibly taller.
<div id="layout" class="grid grid-template-columns:1fr grid-template-rows:48px|80px|48px gap-md 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>The track list alone does not enable Grid; include grid on the parent. More items can create implicit rows, which are sized separately by grid-auto-rows.
Let a row grow with content
minmax(48px,auto) gives the first row a 48px floor and allows it to grow with content. The second row takes the remaining height with 1fr. Compare one line with four 20px lines in the same 224px container.
<div id="layout" class="grid grid-template-columns:1fr grid-template-rows:minmax(48px,auto)|1fr gap-md h:14rem w:17.5rem max-w:100%"> <div id="target" class="p-sm leading:20px">One line</div> <div id="peer" class="p-sm">Remaining height</div></div><div id="layout" class="grid grid-template-columns:1fr grid-template-rows:minmax(48px,auto)|1fr gap-md h:14rem w:17.5rem max-w:100%"> <div id="target" class="p-sm leading:20px">Content<br>can grow<br>across<br>four lines.</div> <div id="peer" class="p-sm">Remaining height</div></div>The short first row stays 48px; the longer one grows to 104px including padding. After the 16px gap, the second row gets 160px or 104px respectively. If content minimums exceed the container’s height, Grid can overflow rather than compress that content indefinitely.
Apply conditionally
Use conditional queries to change the layout at a real viewport width. From sm, the outer rows grow from 48px to 80px while the middle row shrinks to 48px. The grid has no fixed height, so its total height changes with the tracks.
<div id="layout" class="grid grid-template-columns:1fr grid-template-rows:48px|80px|48px gap-md w:17.5rem max-w:100% grid-template-rows:80px|48px|80px@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>