CSS grid-auto-flow Property

Last Updated : 11 Jul, 2025

The grid-auto-flow property Specifies exactly how auto-placed items get flowed into the grid.

Syntax

grid-auto-flow: row | column | row dense | column dense;

Here we explore one by one

Table of Content

Using grid-auto-flow: row
Using grid-auto-flow: column
Using grid-auto-flow: column dense
Using grid-auto-flow: row dense

Using grid-auto-flow: row

The grid-auto-flow: row property in CSS places items by filling each row sequentially, adding new rows as needed.

Example: In this example define a 2x4 grid with specified row and column sizes. Items are placed in order across rows due to grid-auto-flow: row, with specific styling for each grid cell.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS grid-auto-flow Property
    </title>

    <style>
        .main {
            height: 200px;
            width: 200px;
            display: grid;
            grid-gap: 10px;
            grid-template: repeat(4, 1fr) / repeat(2, 1fr);

            /* grid-auto-flow property used here */
            grid-auto-flow: row;
        }

        .Geeks1 {
            background-color: red;
            grid-row-start: 3;
        }

        .Geeks2 {
            background-color: blue;
        }

        .Geeks3 {
            background-color: black;
        }

        .Geeks4 {
            grid-column-start: 2;
            background-color: orange;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="Geeks1"></div>
        <div class="Geeks2"></div>
        <div class="Geeks3"></div>
        <div class="Geeks4"></div>
    </div>
</body>

</html>

Output:

Using grid-auto-flow: column

The grid-auto-flow: column property places items by filling each column sequentially, adding new columns as needed.

Example: This example we creates a 2x4 grid with specified row and column sizes. Items are placed sequentially down columns due to grid-auto-flow: column, with specific styling for each grid cell.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS grid-auto-flow Property
    </title>

    <style>
        .main {
            height: 200px;
            width: 200px;
            display: grid;
            grid-gap: 10px;
            grid-template: repeat(4, 1fr) / repeat(2, 1fr);

            /* grid-auto-flow property used here */
            grid-auto-flow: column;
        }

        .Geeks1 {
            background-color: red;
            grid-row-start: 3;
        }

        .Geeks2 {
            background-color: blue;
        }

        .Geeks3 {
            background-color: black;
        }

        .Geeks4 {
            grid-column-start: 2;
            background-color: orange;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="Geeks1"></div>
        <div class="Geeks2"></div>
        <div class="Geeks3"></div>
        <div class="Geeks4"></div>
    </div>
</body>

</html>

Output:

Using grid-auto-flow: column dense

The grid-auto-flow: column dense property places items in columns, using a dense algorithm to fill gaps efficiently

Example: In this example we defines a 2x4 grid with specified row and column sizes. Items flow into columns and use dense packing mode, filling in empty spaces due to grid-auto-flow: column dense.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS grid-auto-flow Property
    </title>

    <style>
        .main {
            height: 200px;
            width: 200px;
            display: grid;
            grid-gap: 10px;
            grid-template: repeat(4, 1fr) / repeat(2, 1fr);

            /* grid-auto-flow property used here */
            grid-auto-flow: column dense;
        }

        .Geeks1 {
            background-color: red;
            grid-row-start: 3;
        }

        .Geeks2 {
            background-color: blue;
        }

        .Geeks3 {
            background-color: black;
        }

        .Geeks4 {
            grid-column-start: 2;
            background-color: orange;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="Geeks1"></div>
        <div class="Geeks2"></div>
        <div class="Geeks3"></div>
        <div class="Geeks4"></div>
    </div>
</body>

</html>

Output:

Using grid-auto-flow: row dense

The grid-auto-flow: row dense property places items in rows, using a dense algorithm to fill gaps efficiently.

Example: In this example we creates a 2x4 grid with defined row and column sizes. Items flow into rows and use dense packing mode, filling in empty spaces due to grid-auto-flow: row dense.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS grid-auto-flow Property
    </title>

    <style>
        .main {
            height: 200px;
            width: 200px;
            display: grid;
            grid-gap: 10px;
            grid-template: repeat(4, 1fr) / repeat(2, 1fr);

            /* grid-auto-flow property used here */
            grid-auto-flow: row dense;
        }

        .Geeks1 {
            background-color: red;
            grid-row-start: 3;
        }

        .Geeks2 {
            background-color: blue;
        }

        .Geeks3 {
            background-color: black;
        }

        .Geeks4 {
            grid-column-start: 2;
            background-color: orange;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="Geeks1"></div>
        <div class="Geeks2"></div>
        <div class="Geeks3"></div>
        <div class="Geeks4"></div>
    </div>
</body>

</html>