The CSS grid-template-rows property defines the sizes and structure of a grid’s horizontal tracks. Use it with display: grid to decide how available space is divided between rows. Fraction units such as 1fr create proportional rows, while px, em, percentages, and auto provide fixed, relative, or content-sized alternatives. section 5.1
A two-row grid
.grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.5em; } This creates three equal columns and two equal rows for six grid items. Changing the row values changes how the available height is divided; adding or removing items lets you test the resulting layout. section 5.1
Choose row definitions according to the content and layout constraints:
- Use repeat(4, auto) for four content-sized rows; it is equivalent to auto auto auto auto, and each row grows as its content requires. section 5.2
- Use unequal fr values when rows should receive different proportions, just as 2fr and 1fr give tracks different growth factors. section 5.1 section 5.2
- Use repeat() to express repeated tracks or patterns, such as repeat(3, 2fr 1fr), which expands to six alternating tracks. section 5.2
- Use subgrid when an inner grid should reuse its parent’s row lines; provide a fallback or check support with @supports. section 5.5
Listing 5.14 Adding a subgrid for the card contents
.card {
display: grid; #1
gap: 0;
grid-row: span 3; #2
grid-template-rows: max-content auto max-content; #3
grid-template-rows: subgrid; #4
padding: 1rem;
border-radius: 0.5rem;
background-color: #fff;
}
.card > h3 {
align-self: end; #5
margin-block: 0;
padding-block-end: 0.5rem;
border-block-end: 1px solid #eee;
}
Inspect the card example where grid-template-rows: subgrid aligns headings, content, and Read More links across separate cards. section 5.5
