CSS Grid

CSS Grid Rows

The CSS Grid Rows property is used to define the height and structure of rows in a CSS Grid layout.

Rows are created using the grid-template-rows property.

Just as columns control horizontal layout, rows control the vertical layout of grid items. The supporting concepts are explained in CSS Grid Columns and CSS Grid Gap.

With Grid Rows, you can:

Create multiple rows
Set fixed row heights
Create flexible row layouts
Build structured page sections
Control vertical spacing and alignment

Syntax

CSS Grid Rows Syntax

css

.container {
    display: grid;
    grid-template-rows: value;
}

CSS Grid Rows Example

css

.container {
    display: grid;
    grid-template-rows: 100px 200px;
}

Creates two rows: the first is 100px high and the second is 200px high.

Attributes

Value	Description	Example
px	Fixed row height	150px
%	Percentage height	50%
fr	Flexible fraction unit	1fr
auto	Automatic height based on content	auto
repeat()	Repeats row definitions	repeat(3, 100px)

Example

CSS Grid Rows Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Grid Rows Example</title>
    <style>
        .container {
            display: grid;
            grid-template-rows: 100px 150px;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            border: 2px solid black;
            padding: 10px;
        }
        .item {
            background-color: lightblue;
            padding: 20px;
            text-align: center;
            border: 1px solid #333;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
    </div>
</body>
</html>

Browser Support

Feature	Chrome	Edge	Firefox	Safari
grid-template-rows	57	16	52	10.1

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.

Notes

grid-template-rows controls row heights.
auto allows rows to grow based on content.
fr can be used to create flexible row heights.
repeat() simplifies repetitive row definitions.
Rows work together with grid-template-columns to create complete grid layouts.

Equal Height Rows

css

grid-template-rows: 1fr 1fr 1fr;

Creates three equal-height rows.

Using repeat()

repeat() Example

css

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

Creates three rows, each 120px high.

Mixed Row Sizes

Mixed Row Sizes Example

css

grid-template-rows: 80px auto 150px;

First row = 80px
Second row = content-based height
Third row = 150px

Conclusion

The grid-template-rows property defines the height and structure of rows in a CSS Grid layout. By combining fixed heights, flexible units, and automatic sizing, you can create organized and responsive grid-based designs.

PreviousCSS Grid Columns NextCSS Grid Gap