rick@tillitsdone.com

+66824564755

Scroll to discover

CSS grid-template-rows A Comprehensive Guide

The CSS grid-template-rows property defines the number and height of rows within a grid container.

It offers various options like fixed lengths, percentages, fr units, and dynamic functions like minmax() and fit-content().

This guide explains how to use grid-template-rows effectively in your web design projects.

### Basics of `grid-template-rows`

The `grid-template-rows` property in CSS helps you define the number and height of rows in a grid container. This is a key part of CSS Grid Layout, allowing for flexible and responsive designs. The property has been well-supported across browsers since July 2020, making it reliable for modern web design.

### Baseline and Compatibility

The `grid-template-rows` property is widely supported across many devices and browsers. It's been available since July 2020, so you can use it confidently in your web projects.

### Syntax and Examples

The `grid-template-rows` property lets you define the structure and size of rows in a grid container. Here's the basic syntax:

```css
grid-template-rows: none | auto | max-content | min-content | length | initial | inherit;

Examples

Let’s look at some practical examples to see how grid-template-rows works.

Example 1: Using `auto` and Length Values

Here, we create a grid with 4 columns and 2 rows, each cell containing a letter from A to H.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>CSS grid-template-rows Property</title>
    <style>
        .grid-container {
            background-color: green;
            padding: 30px;
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-template-rows: auto auto;
            grid-gap: 10px;
        }
        .grid-item {
            background-color: white;
            border: 1px solid white;
            font-size: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">A</div>
        <div class="grid-item">B</div>
        <div class="grid-item">C</div>
        <div class="grid-item">D</div>
        <div class="grid-item">E</div>
        <div class="grid-item">F</div>
        <div class="grid-item">G</div>
        <div class="grid-item">H</div>
    </div>
</body>
</html>

CSS:

.grid-container {
    background-color: green;
    padding: 30px;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto;
    grid-gap: 10px;
}
.grid-item {
    background-color: white;
    border: 1px solid white;
    font-size: 30px;
    text-align: center;
}

Example 2: Using `min-content` and `max-content` Values

Here, we create a grid with 4 columns and 2 rows. The first row adjusts automatically, and the second row is fixed at 150px.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>CSS grid-template-rows Property</title>
    <style>
        .grid-container {
            background-color: green;
            padding: 30px;
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-template-rows: auto 150px;
            grid-gap: 10px;
        }
        .grid-item {
            background-color: white;
            border: 1px solid white;
            font-size: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">A</div>
        <div class="grid-item">B</div>
        <div class="grid-item">C</div>
        <div class="grid-item">D</div>
        <div class="grid-item">E</div>
        <div class="grid-item">F</div>
        <div class="grid-item">G</div>
        <div class="grid-item">H</div>
    </div>
</body>
</html>

CSS:

.grid-container {
    background-color: green;
    padding: 30px;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto 150px;
    grid-gap: 10px;
}
.grid-item {
    background-color: white;
    border: 1px solid white;
    font-size: 30px;
    text-align: center;
}

Values and Descriptions

The grid-template-rows property accepts various values to define the size and behavior of rows within a grid container. Here’s a breakdown:

`none`

Description: No explicit grid; rows are generated implicitly.

grid-template-rows: none;

`[linename]`

Description: Names a line in the grid.

grid-template-rows: [linename] 100px;
grid-template-rows: [linename1] 100px [linename2 linename3];

`<length>`

Description: Sets the row size using a length value (e.g., px, em, rem).

grid-template-rows: 100px 1fr;

`<percentage>`

Description: Sets the row size as a percentage of the grid container’s block size.

grid-template-rows: 50% 200px;

`<flex>`

Description: Uses the fr unit to set the flex factor of the row.

grid-template-rows: 1fr 2fr;

`max-content`

Description: Sizes the row to fit the largest content of the grid items.

grid-template-rows: max-content;

`min-content`

Description: Sizes the row to fit the smallest content of the grid items.

grid-template-rows: min-content;

`minmax(min, max)`

Description: Defines a size range for the row.

grid-template-rows: minmax(100px, 1fr);

`auto`

Description: Sets the row size based on the content.

grid-template-rows: auto;

`fit-content([ <length> | <percentage> ])`

Description: Clamps the row size at a specified value.

grid-template-rows: fit-content(50%);

`repeat([ <positive-integer> | auto-fill | auto-fit ], <track-list>)`

Description: Repeats a fragment of the track list.

grid-template-rows: repeat(3, 200px);

`masonry`

Description: Uses the masonry algorithm for layout.

grid-template-rows: masonry;

`subgrid`

Description: Adopts the parent grid’s row sizes.

grid-template-rows: subgrid;

Formal Definition and Syntax

The grid-template-rows property allows you to define the structure and size of rows in a grid container.

Formal Definition

Initial Value	`none`
Applies to	Grid containers
Inherited	No
Percentages	Refer to the corresponding dimension of the content area
Computed Value	As specified, but with relative lengths converted into absolute lengths
Animation Type	Simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list

Explanation of Syntax Components

none: No explicit grid defined. Rows are created implicitly.
<track-list>: List of track sizes and optional line names. Includes fixed, flexible, and dynamic sizes.
<auto-track-list>: List allowing automatic row generation, useful for responsive designs.
subgrid <line-name-list>?: Grid adopts the spanned portion of its parent grid. Optional line names.
<line-names>: Custom identifier for naming grid lines, enclosed in square brackets.
<track-size>: Defines track size using fixed lengths, percentages, flexible sizes (fr), or functions like minmax() or fit-content().
<track-repeat>: Repeats a fragment of the track list for patterns.
<fixed-size>: Specifically for fixed sizes.
<fixed-repeat>: Repeats a fragment of the fixed size list.
<auto-repeat>: Repeats a fragment of the auto track list for responsive layouts.
<name-repeat>: Repeats line names.
<track-breadth>: Defines track breadth using lengths, percentages, flexible sizes (fr), or dynamic sizes.
<inflexible-breadth>: Specifically for inflexible sizes.
<length-percentage>: Length or percentage value for track size.
<fixed-breadth>: Defines fixed breadth using lengths or percentages.

Specifying Grid Row Sizes

The grid-template-rows property in CSS lets you define row sizes within a grid container, creating flexible and responsive layouts. Here’s how to specify row sizes using different values and functions.

HTML

<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>

CSS

#grid {
  display: grid;
  height: 100px;
  grid-template-rows: 30px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

This example creates a grid with two rows. The first row is 30px tall, and the second row takes up the remaining space using the fr unit.

Specifying Grid Row Sizes with Different Values

You can define row sizes using fixed lengths, percentages, and dynamic functions like minmax(). Here are some examples:

Fixed Lengths

grid-template-rows: 100px 200px;

Percentages

grid-template-rows: 50% 50%;

`fr` Unit

grid-template-rows: 1fr 2fr;

`minmax()` Function

grid-template-rows: minmax(100px, 1fr);

`fit-content()` Function

grid-template-rows: fit-content(200px);

Combining Different Values

Combine fixed lengths, percentages, and the fr unit for complex layouts:

grid-template-rows: 100px 50% 1fr;

Examples

Using `repeat()` for Repeated Rows

grid-template-rows: repeat(3, 100px);

This example creates three rows, each 100px tall, using the repeat() function.

Example 1: Fixed Rows

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>CSS grid-template-rows Property</title>
    <style>
        .grid-container {
            background-color: green;
            padding: 30px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 100px);
            grid-gap: 10px;
        }
        .grid-item {
            background-color: white;
            border: 1px solid white;
            font-size: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">A</div>
        <div class="grid-item">B</div>
        <div class="grid-item">C</div>
        <div class="grid-item">D</div>
        <div class="grid-item">E</div>
        <div class="grid-item">F</div>
        <div class="grid-item">G</div>
        <div class="grid-item">H</div>
        <div class="grid-item">I</div>
    </div>
</body>
</html>

CSS:

.grid-container {
    background-color: green;
    padding: 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 100px);
    grid-gap: 10px;
}

.grid-item {
    background-color: white;
    border: 1px solid white;
    font-size: 30px;
    text-align: center;
}

This example creates a grid with three columns and three rows, each row being 100px high.

Example 2: Flexible Rows with `minmax()`

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>CSS grid-template-rows Property</title>
    <style>
        .grid-container {
            background-color: green;
            padding: 30px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: minmax(50px, 1fr);
            grid-gap: 10px;
        }
        .grid-item {
            background-color: white;
            border: 1px solid white;
            font-size: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">A</div>
        <div class="grid-item">B</div>
        <div class="grid-item">C</div>
        <div class="grid-item">D</div>
        <div class="grid-item">E</div>
        <div class="grid-item">F</div>
        <div class="grid-item">G</div>
        <div class="grid-item">H</div>
        <div class="grid-item">I</div>
    </div>
</body>
</html>

CSS:

.grid-container {
    background-color: green;
    padding: 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: minmax(50px, 1fr);
    grid-gap: 10px;
}

.grid-item {
    background-color: white;
    border: 1px solid white;
    font-size: 30px;
    text-align: center;
}

This example creates flexible rows with a minimum height of 50px and a maximum height that adapts to the content.

Example 3: Content-Based Rows with `fit-content()`

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>CSS grid-template-rows Property</title>
    <style>
        .grid-container {
            background-color: green;
            padding: 30px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: fit-content(100px);
            grid-gap: 10px;
        }
        .grid-item {
            background-color: white;
            border: 1px solid white;
            font-size: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">A</div>
        <div class="grid-item">B</div>
        <div class="grid-item">C</div>
        <div class="grid-item">D</div>
        <div class="grid-item">E</div>
        <div class="grid-item">F</div>
        <div class="grid-item">G</div>
        <div class="grid-item">H</div>
        <div class="grid-item">I</div>
    </div>
</body>
</html>

CSS:

.grid-container {
    background-color: green;
    padding: 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: fit-content(100px);
    grid-gap: 10px;
}

.grid-item {
    background-color: white;
    border: 1px solid white;
    font-size: 30px;
    text-align: center;
}

This example creates rows that adjust to the content size, with a maximum height of 100px.

Example 4: Nested Grids with `subgrid`

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>CSS grid-template-rows Property</title>
    <style>
        .parent-grid {
            display: grid;
            grid-template-rows: 100px 200px;
            grid-gap: 10px;
        }
        .child-grid {
            display: grid;
            grid-template-rows: subgrid;
            grid-gap: 10px;
        }
        .grid-item {
            background-color: white;
            border: 1px solid white;
            font-size: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="parent-grid">
        <div class="grid-item">A</div>
        <div class="child-grid">
            <div class="grid-item">B</div>
            <div class="grid-item">C</div>
        </div>
        <div class="grid-item">D</div>
    </div>
</body>
</html>

CSS:

.parent-grid {
    display: grid;
    grid-template-rows: 100px 200px;
    grid-gap: 10px;
}

.child-grid {
    display: grid;
    grid-template-rows: subgrid;
    grid-gap: 10px;
}

.grid-item {
    background-color: white;
    border: 1px solid white;
    font-size: 30px;
    text-align: center;
}

This example creates a nested grid where the child grid adopts the row sizes from the parent grid using subgrid.

Browser Compatibility

The grid-template-rows property is widely supported across modern browsers. This ensures your grid layouts work seamlessly across various platforms and devices.

Full Compatibility

Google Chrome: Supported since version 57 (March 2017).
Firefox: Supported since version 52 (March 2017).
IE/Edge: Supported since version 16 (September 2017).
Opera: Supported since version 44 (March 2017).
Safari: Supported since version 10 (September 2016).

Browser Compatibility Table

Browser	Version	Release Date
Google Chrome	57	March 2017
Firefox	52	March 2017
IE/Edge	16	September 2017
Opera	44	March 2017
Safari	10	September 2016

Additional Resources

For more information on browser compatibility, refer to:

FAQs

What does the `grid-template-rows` property do?

The grid-template-rows property sets the height of each row in a grid container. It can use fixed heights, flexible heights (fr), or dynamic sizes with functions like minmax().

How do I define rows using `grid-template-rows`?

You can define row heights like this: grid-template-rows: 100px auto 1fr;, which creates three rows: the first is 100px, the second takes up as much space as its content, and the third fills the remaining space.

Can `grid-template-rows` be used with `auto-fit` or `auto-fill`?

While auto-fit and auto-fill are typically used with grid-template-columns, you can still control row sizes responsively using functions like minmax() with grid-template-rows.

What’s the difference between `grid-template-rows` and `grid-auto-rows`?

grid-template-rows defines the explicit row structure, while grid-auto-rows controls the size of rows that are automatically added when content overflows the defined grid.

How does `grid-template-rows` work with `grid-template-areas`?

grid-template-rows determines the row heights within the overall grid layout, while grid-template-areas defines named areas. The row heights should align with the areas to ensure a consistent design.

Can I use `grid-template-rows` with `repeat()`?

Yes, you can use the repeat() function with grid-template-rows to create a repeated fragment of the row list, making it easier to define multiple rows with a recurring pattern. For example, grid-template-rows: repeat(3, 100px);.

What is the `subgrid` value in `grid-template-rows`?

The subgrid value indicates that the grid will adopt the spanned portion of its parent grid in that axis. Instead of being specified explicitly, the sizes of the grid rows/columns will be taken from the parent grid’s definition.

How do I use `fit-content()` with `grid-template-rows`?

The fit-content() function represents the formula min(max-content, max(auto, argument)), which is calculated similarly to auto (i.e., minmax(auto, max-content)), except that the track size is clamped at the specified argument if it is greater than the auto minimum. For example, grid-template-rows: fit-content(200px);.

What does the `masonry` value do in `grid-template-rows`?

The masonry value indicates that this axis should be laid out according to the masonry algorithm, which arranges items in a way that minimizes gaps.

Can I combine `grid-template-rows` with other CSS properties?

Yes, you can combine grid-template-rows with other CSS properties to create more complex and dynamic layouts. For example, you can use grid-gap to add space between rows, or align-items to control the alignment of items within the grid.

By understanding these FAQs, you can effectively use the grid-template-rows property to create flexible and responsive grid layouts in your web design projects. Whether you’re working with fixed heights, flexible sizes, or dynamic functions, this property offers the tools you need to create sophisticated grid layouts.

CSS Blogs

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

CSS property CSS animation

css_property_cover/css-property-grid-template-columns.png

CSS Grid-Template-Columns Create Flexible Grid Layouts Learn how to use CSS grid-template-columns to create flexible and responsive grid layouts. Define column sizes with fixed, fractional, and dynamic options. Optimize your web design with this powerful CSS property.

css_property_cover/css-property-padding-inline-end.png

CSS padding-inline-end Mastering Logical Padding Learn about the CSS padding-inline-end property, which defines logical inline end padding. Use it to create flexible and responsive designs with options like length, percentage, auto, inherit, initial, and unset.

css_property_cover/css-property-grid-template.png

Mastering CSS grid-template for Efficient Layouts Learn about CSS grid-template, a powerful property for creating responsive and dynamic grid layouts. Discover its use cases, available options like rows, columns, and areas, and how to optimize your CSS code.

css_property_cover/css-property-background-size.png

CSS Background-Size Control Image Scaling Learn how to use the CSS background-size property to control the scaling of background images. Discover options like cover, contain, and custom dimensions. Enhance your web design with responsive background images.

css_property_cover/css-property-border-inline.png

CSS Border-Inline Enhance Web Design with Logical Borders Learn how to use CSS border-inline to simplify the styling of inline borders based on writing mode and direction. Explore width, style, and color options.

css_property_cover/css-property-column-gap.png

CSS Column-gap Enhance Layout Spacing The CSS `column-gap` property enhances layout spacing by controlling the gap between columns in flex, grid, and multi-column layouts. Available options include normal, length, and percentage values.

View all 337 CSS blogs

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?

Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

Let's keep in Touch

Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.

Contact Information

rick@tillitsdone.com+66824564755

Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.

Address

9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand

Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.

Social media

Facebook Instagram LinkedIn

Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.

We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.

DesignRush
web design companies

Goodfirms

CSS grid-template-rows A Comprehensive Guide

Examples

Example 1: Using auto and Length Values

Example 2: Using min-content and max-content Values

Values and Descriptions

none

[linename]

<length>

<percentage>

<flex>

max-content

min-content

minmax(min, max)

auto

fit-content([ <length> | <percentage> ])

repeat([ <positive-integer> | auto-fill | auto-fit ], <track-list>)

masonry

subgrid

Formal Definition and Syntax

Formal Definition

Explanation of Syntax Components

Specifying Grid Row Sizes

HTML

CSS

Specifying Grid Row Sizes with Different Values

Fixed Lengths

Percentages

fr Unit

minmax() Function

fit-content() Function

Combining Different Values

Examples

Using repeat() for Repeated Rows

Example 1: Fixed Rows

Example 2: Flexible Rows with minmax()

Example 3: Content-Based Rows with fit-content()

Example 4: Nested Grids with subgrid

Browser Compatibility

Full Compatibility

Browser Compatibility Table

Additional Resources

FAQs

What does the grid-template-rows property do?

How do I define rows using grid-template-rows?

Can grid-template-rows be used with auto-fit or auto-fill?

What’s the difference between grid-template-rows and grid-auto-rows?

How does grid-template-rows work with grid-template-areas?

Can I use grid-template-rows with repeat()?

What is the subgrid value in grid-template-rows?

How do I use fit-content() with grid-template-rows?

What does the masonry value do in grid-template-rows?

Can I combine grid-template-rows with other CSS properties?

Talk with CEO

Example 1: Using `auto` and Length Values

Example 2: Using `min-content` and `max-content` Values

`none`

`[linename]`

`<length>`

`<percentage>`

`<flex>`

`max-content`

`min-content`

`minmax(min, max)`

`auto`

`fit-content([ <length> | <percentage> ])`

`repeat([ <positive-integer> | auto-fill | auto-fit ], <track-list>)`

`masonry`

`subgrid`

`fr` Unit

`minmax()` Function

`fit-content()` Function

Using `repeat()` for Repeated Rows

Example 2: Flexible Rows with `minmax()`

Example 3: Content-Based Rows with `fit-content()`

Example 4: Nested Grids with `subgrid`

What does the `grid-template-rows` property do?

How do I define rows using `grid-template-rows`?

Can `grid-template-rows` be used with `auto-fit` or `auto-fill`?

What’s the difference between `grid-template-rows` and `grid-auto-rows`?

How does `grid-template-rows` work with `grid-template-areas`?

Can I use `grid-template-rows` with `repeat()`?

What is the `subgrid` value in `grid-template-rows`?

How do I use `fit-content()` with `grid-template-rows`?

What does the `masonry` value do in `grid-template-rows`?

Can I combine `grid-template-rows` with other CSS properties?