CSS grid-auto-flow Property

The auto-placement algorithm positions items by filling each row in turn, adding new rows as needed.

Syntax

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

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto;
        grid-gap: 12px;
        background-color: #00ab55;
        padding: 12px;
    }
    .grid-container > div {
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
        padding: 12px 0;
    }
    .grid-container.column{
        grid-auto-flow:column;
    }
    .grid-container.row{
        grid-auto-flow:row;
    }
</style>
</head>
<body>

<div class="grid-container column">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>
<br>
<br>
<div class="grid-container row">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

</body>
</html>

Preview

Property Values

Value	Description
row	The default value. Items are placed by filling each row.
column	Items are placed by filling each column.
dense	Fill any gaps in the grid with items.
row dense	Items are placed by filling each row and any gaps in the grid.
column dense	Items are placed by filling each column and any gaps in the grid.

Supported Browsers

Property	Chrome	Firefox	Safari	Edge / IE	Opera
grid-auto-flow	57.0	52.0	10.0	16.0	44.0

grid-auto-columns

grid-auto-rows

CSS grid-auto-flow Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us