The grid-template-rows property defines the number and size of a grid container's rows, using the same length values, percentages, and fr units as grid-template-columns, but along the vertical axis instead.

Syntax

grid-template-rows: value value value...;

Deep Dive Course

Unlike columns, which frequently need to be defined explicitly for a specific layout, rows are often left to be created implicitly, automatically, as content naturally requires more of them, sized according to grid-auto-rows, rather than needing a fixed, predetermined number of rows defined upfront via grid-template-rows. Explicitly defining rows with grid-template-rows is most useful for a layout with a genuinely fixed, known number of distinct rows, like a header, main content area, and footer each needing their own specific height within an overall page grid.

1Understanding Grid-template-rows

💡

For a grid where the number of rows naturally grows with the amount of content, like a card gallery, let rows be created implicitly rather than trying to predefine a fixed number with grid-template-rows — explicit row definitions are better suited to a layout with a known, fixed number of distinct row regions.

editor.html

.page {
  display: grid;
  grid-template-rows: 80px 1fr 60px;
  height: 100vh;
}

localhost:3000

2Practical Example

Here is a real-world application of Grid-template-rows showing how it is used in production CSS code.

editor.html

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
}

localhost:3000

3Best Practices

Follow these guidelines when working with Grid-template-rows:

1. Use grid-template-rows explicitly for layouts with a genuinely fixed, known number of row regions, like a header/main/footer page structure

2. Let rows be created implicitly, sized via grid-auto-rows, for content that naturally grows the number of rows needed, like a card gallery with an unpredictable number of items

3. Use fr units in grid-template-rows the same way as in grid-template-columns, to distribute available vertical space flexibly among rows

⚠️

Tip: For a grid where the number of rows naturally grows with the amount of content, like a card gallery, let rows be created implicitly rather than trying to predefine a fixed number with grid-template-rows — explicit row definitions are better suited to a layout with a known, fixed number of distinct row regions.

editor.html

.page {
  display: grid;
  grid-template-rows: 80px 1fr 60px;
  height: 100vh;
}

localhost:3000

Examples

Example 01Basic Usage

.page {
  display: grid;
  grid-template-rows: 80px 1fr 60px;
  height: 100vh;
}

Example 02Advanced Example

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
}

Best Practices

Use grid-template-rows explicitly for layouts with a genuinely fixed, known number of row regions, like a header/main/footer page structure
Let rows be created implicitly, sized via grid-auto-rows, for content that naturally grows the number of rows needed, like a card gallery with an unpredictable number of items
Use fr units in grid-template-rows the same way as in grid-template-columns, to distribute available vertical space flexibly among rows

Interview Question

Why would you typically use grid-auto-rows rather than grid-template-rows for a photo gallery grid where the exact number of photos, and therefore rows, isn't known in advance?▼

Hint: Think about what grid-template-rows requires you to specify upfront, versus what grid-auto-rows is specifically designed to handle instead.

grid-template-rows requires explicitly listing a specific, predetermined size for each individual row the grid should have, which inherently assumes you already know exactly how many distinct rows the layout needs, information that simply isn't available upfront for a gallery whose number of photos, and therefore required rows, can vary and grow arbitrarily depending on how much content actually gets added. grid-auto-rows instead specifically defines the sizing rule to automatically apply to any implicitly-created row, meaning as grid items overflow beyond the explicitly defined columns and need additional rows to accommodate them, the grid automatically creates however many new rows are actually needed and sizes each of them according to that one shared grid-auto-rows rule, without ever needing to know or specify the total row count in advance. This is exactly why an unpredictable, growing amount of content is better served by letting rows be created implicitly and sized via grid-auto-rows, rather than trying to predefine an exact, fixed number of rows that the actual content might not match.

Exercises

MediumPractice using Grid-template-rows in a real scenario.

View Solution

.page {
  display: grid;
  grid-template-rows: 80px 1fr 60px;
  height: 100vh;
}

Frequently Asked Questions

Why would you typically use grid-auto-rows rather than grid-template-rows for a photo gallery grid where the exact number of photos, and therefore rows, isn't known in advance?▼

Related Functions

Grid-template-columnsDisplay-gridGrid-gap