CSS gridautoflow Property (original) (raw)

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

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 `

CSS grid-auto-flow Property 
<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>

`

**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 `

CSS grid-auto-flow Property 
<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>

`

**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 `

CSS grid-auto-flow Property 
<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>

`

**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 `

CSS grid-auto-flow Property 
<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>

`

**Output:

**Supported Browsers

The browser supported by **CSS grid-auto-flow Property are listed below: