Rows control the vertical structure of the Grid, while columns control its horizontal structure. Together, they form the basic structure of a two-dimensional Grid layout.

What Are Grid Rows?

A Grid Row is a horizontal track inside a Grid Container.

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

What Are Grid Columns?

A Grid Column is a vertical track inside a Grid Container.

Columns are defined using the grid-template-columns property.

Basic Syntax

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
}

Rows and Columns Diagram

Row 1
Column 1

Row 1
Column 2

Row 1
Column 3

Row 2
Column 1

Row 2
Column 2

Row 2
Column 3

2 rows × 3 columns = 6 Grid cells

Example 1: Creating Three Columns

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

The Grid Container creates three equal columns.

The 1fr 1fr 1fr values divide the available horizontal space into three equal parts.

Example 2: Creating Two Rows

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

Two Grid Rows are created, and each row has a height of 100px.

Output

Row 1
Column 1

Row 1
Column 2

Row 1
Column 3

Row 2
Column 1

Row 2
Column 2

Row 2
Column 3

Different Column Sizes

Columns do not have to be equal. Different values can be used to create different column sizes.

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

The available space is divided into 4 fractions.

The first column receives 1 fraction, the second receives 2 fractions, and the third receives 1 fraction.

The resulting proportion is: 1 : 2 : 1.

Different Row Sizes

Rows can also have different heights.

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

The first row has a height of 80px.

The second row has a height of 150px.

The third row has a height of 100px.

Using repeat()

The repeat() function can be used to create repeated rows or columns.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 100px);
}

This creates three equal columns and two rows of 100 pixels each.

Using auto for Rows and Columns

.container {
    display: grid;
    grid-template-columns: 200px auto 200px;
}

The first and third columns are fixed at 200px.

The middle column uses the remaining available space.

Rows and Columns Properties

grid-template-columns

Defines the number and size of Grid columns.

grid-template-rows

Defines the number and size of Grid rows.

Grid Cell

The intersection of one Grid Row and one Grid Column creates a Grid Cell.

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100px 100px;
}

Two columns multiplied by two rows create four Grid Cells.

Example 🤓🌍

A dashboard can use different rows and columns to organize statistics, charts, and information cards.

.dashboard {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 120px 250px;
    gap: 20px;
}

The dashboard has two columns with a 2 : 1 proportion.

It also defines two rows with heights of 120px and 250px.

Rows vs Columns

Feature	Rows	Columns
Direction	Horizontal	Vertical
Property	grid-template-rows	grid-template-columns
Controls	Row height	Column width

Important: CSS Grid uses both rows and columns to create a two-dimensional layout. Use grid-template-columns for the column structure and grid-template-rows for the row structure.

Summary

CSS Grid uses rows and columns to create structured two-dimensional layouts. grid-template-columns controls column sizes, while grid-template-rows controls row sizes. Values such as px, fr, %, auto, and repeat() can be used to create flexible Grid structures.

← Previous: Grid Container

Next: Grid Template Columns →