CSS Grid Rows

Written by Swapnil RajaUpdated 30 Jul 2026

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;
}

PreviousCSS Grid Columns NextCSS Grid Gap

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)

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>

CSS Grid Rows

Syntax

Attributes

Example

Browser Support

Notes

Equal Height Rows

Using repeat()

Mixed Row Sizes

Conclusion