Grid-template-rows
The CSS grid-template-rows property defines the number, sizes, and track structure of a grid's rows.
CSS in Depth, Second Edition
The CSS grid-template-rows property defines the sizes and structure of a grid's rows.
- How it is used
- Defines grid row tracks for basic layouts, page structures, repeated patterns, and aligned nested card content.
- How deep it goes
- Explains proportional, fixed, automatic, repeated, and subgrid rows with examples, but stops short of broader grid placement rules.
- Examples
- Uses equal two-row grids, four auto-sized page rows, repeated track patterns, and aligned author cards.
- What you can do after
- Build grid row structures from scratch and align nested content through subgrid or a supported fallback.
Read how CSS in Depth, Second Edition explains grid-template-rows →
Tiny CSS Projects
The CSS grid-template-rows property explicitly defines the number and sizes of rows in a grid.
- How it is used
- Defines row sizes for grid layouts and aligns headings, paragraphs, and links across cards.
- How deep it goes
- Defines row track lists and works through a three-row card layout; leaves implicit-row sizing to other grid properties.
- Examples
- Uses a card with `min-content auto min-content` rows, a calculated height, and a heading margin adjustment.
- What you can do after
- Build it from scratch: size a card’s three grid rows so its links align while paragraphs use the remaining space.
Related concepts
- CSS Gridconfigures · CSS Grid is a CSS layout system for arranging elements in two-dimensional rows and columns.
- fraction unitused by · The CSS fr unit represents a share of the free space remaining in a grid container after non-flexible track sizes and other deductions are accounted for.
- grid containerconfigures · A grid container is an element whose display mode establishes a CSS Grid formatting context for laying out its child elements as grid items.
- style propertykind of · A style property is a named setting or interface attribute that specifies or exposes a presentation characteristic of an element or view.
- repeat()uses · The CSS repeat() function specifies a repeated sequence of grid track sizes or patterns, using a fixed or automatically determined repetition count.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.