CSS grid-auto-flow Property

Description

The grid-auto-flow property controls the grid container’s auto-placement algorithm — in other words, how grid items without an explicit placement are positioned and how the grid grows to accommodate them. It determines the primary axis along which those items are laid out and whether the algorithm will leave gaps or attempt to backfill them. Because it affects automatic placement, this property plays a central role whenever items rely on source order rather than explicit grid line placement.

Auto-placement always respects source order and any items that already have an explicit location remain where they are; the algorithm then walks through the remaining items and fills the grid according to the chosen placement strategy. The primary axis selected by the algorithm interacts with the document’s writing direction and flow, so what is considered a “row-wise” or “column-wise” progression may vary with the page’s writing mode. When the algorithm places items it may create implicit tracks as needed, and the pattern used for stepping through grid cells (and whether the algorithm tries to compact items into earlier gaps) is what this property governs.

Because it controls where auto-placed items go, grid-auto-flow is often used in concert with the sizes for any implicit tracks — those sizes are determined by grid-auto-rows and grid-auto-columns. Setting those sizing properties alongside a deliberate auto-placement mode lets you control both the shape of the implicit grid and how densely items fill it. In practice, use explicit placement for items that must appear in fixed locations, and rely on this auto-placement behavior when you want a more flexible, flow-driven layout that can grow and compact automatically.

Definition

Initial value: row
Applies to: Grid containers
Inherited: No
Computed value: As specified
Animatable: Yes
JavaScript syntax: object.style.gridAutoFlow

Interactive Demo

grid-auto-flow: row;

grid-auto-flow: column;

grid-auto-flow: row dense;

One

Two

Three

Four

Five

Syntax

grid-auto-flow: [ row | column ] || dense

Values

rowA keyword that indicates that the automatic placement algorithm places elements by filling each line in turn, adding new lines as needed. This is the default value.
columnA keyword that indicates that the automatic placement algorithm places elements by filling each column in turn, adding new columns as needed.
denseA keyword indicating that the automatic placement algorithm uses a "dense" element placement algorithm that attempts to fill previously formed voids in the grid if appropriate-sized elements appear in the layout further. This can lead to the appearance of elements not in the order they are indicated, while filling holes left by large elements. If this dense keyword is omitted, then a "sparse" algorithm is used that places the elements in the grid without backing down to fill in the voids . This ensures that all automatically placed elements are displayed "in order", even if this leaves voids that could be filled with later elements.

Example

HTML

<div class="demo">

    <section class="example">

        <h2>grid-auto-flow: row</h2>

        <div class="grid grid-row">

            <div class="item">1</div>

            <div class="item">2</div>

            <div class="item">3</div>

            <div class="item">4</div>

            <div class="item">5</div>

            <div class="item">6</div>

            <div class="item">7</div>

        </div>

    </section>



    <section class="example">

        <h2>grid-auto-flow: column</h2>

        <div class="grid grid-column">

            <div class="item">1</div>

            <div class="item">2</div>

            <div class="item">3</div>

            <div class="item">4</div>

            <div class="item">5</div>

            <div class="item">6</div>

            <div class="item">7</div>

        </div>

    </section>



    <section class="example">

        <h2>grid-auto-flow: row dense</h2>

        <div class="grid grid-dense">

            <div class="item">1</div>

            <div class="item">2</div>

            <div class="item">3</div>

            <div class="item big">4</div>

            <div class="item">5</div>

            <div class="item">6</div>

            <div class="item">7</div>

        </div>

    </section>

</div>

CSS

/* Layout */
body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    margin: 24px;
    background: #f6f8fa;
    color: #111;
}

.demo {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.example {
    width: 320px;
}

.example h2 {
    font-size: 15px;
    margin: 0 0 12px 0;
    font-weight: 600;
}

/* Common grid item styles */
.grid {
    background: #fff;
    border: 1px solid #e1e4e8;
    padding: 12px;
    border-radius: 8px;
    display: grid;
    gap: 10px;
    align-content: start;
}

.item {
    background: linear-gradient(180deg, #0366d6 0%, #014c9a 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-weight: 700;
    box-shadow: 0 1px 0 rgba(0,0,0,0.05) inset;
}

/* grid-auto-flow: row
   Auto-placement goes by rows. We define 3 columns. */
.grid-row {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 80px);
    grid-auto-rows: 60px;
}

/* grid-auto-flow: column
   Auto-placement goes by columns. Define 3 rows and automatic column sizing. */
.grid-column {
    grid-auto-flow: column;
    grid-template-rows: repeat(3, 60px);
    grid-auto-columns: 80px;
}

/* grid-auto-flow: row dense
   Dense packing will try to fill gaps.
   The .big item spans 2 columns to create a potential hole that dense placement can fill. */
.grid-dense {
    grid-auto-flow: row dense;
    grid-template-columns: repeat(3, 80px);
    grid-auto-rows: 60px;
}

/* Larger item to demonstrate gaps */
.item.big {
    grid-column: span 2;
}

/* A little responsive behavior */
@media (max-width: 980px) {
    .demo {
        justify-content: center;
    }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS grid-auto-flow property. Hover over a browser icon to see the version that first introduced support for this CSS property.