grid-auto-flow
Controls the auto-placement direction of grid items. Default is row (horizontal); adding dense enables dense packing that fills gaps.
Class List
| Class | CSS | Description |
|---|---|---|
gafr | grid-auto-flow: row | Row direction placement (default). Fills left to right, then next row |
gafc | grid-auto-flow: column | Column direction placement. Fills top to bottom, then next column |
gafd | grid-auto-flow: dense | Dense placement. Fills gaps with later items |
gafrd | grid-auto-flow: row dense | Row direction + dense placement |
gafcd | grid-auto-flow: column dense | Column direction + dense placement |
Visual Comparison
Compares how the same items are arranged based on flow direction.
Row (default value) — gafr
Fills rows first in 1-2-3 order, then moves to next row
Column — gafc
Fills columns first in 1-2 order, then moves to next column
Dense — gafd
When gaps appear, pulls later items forward to fill
row vs column Comparison
gafr fills rows first then moves to the next row, while gafc fills columns first then moves to the next column.
row (default value) —gafr
Fills in 1-2-3 (row 1) then 4-5 (row 2) order
column — gafc
Fills in 1-2 (col 1) then 3-4 (col 2) then 5 (col 3) order
When to Use What?
| Situation | Recommended | Reason |
|---|---|---|
| Standard grid (row-first) | gafr | Default. Most card/list layouts |
| Column-first placement | gafc | Timeline, newspaper-style vertical flow |
| No-gap gallery | gafd | Maximize space efficiency with varied card sizes |
| Row-first + fill gaps | gafrd | Same as gafd (row is default) |
| Column-first + fill gaps | gafcd | Fill gaps in vertical flow too |
Class Details
gafrgrid-auto-flow: row
Default value. Arranges items in row direction (left to right), moving to the next row when full. Rarely needs to be specified explicitly since it is the default behavior for most grid layouts.
<!-- Default row direction (gafr can be omitted) -->
<div class="dg gtcr3-1fr gap16px">
<div>1</div> <!-- Row 1, Col 1 -->
<div>2</div> <!-- Row 1, Col 2 -->
<div>3</div> <!-- Row 1, Col 3 -->
<div>4</div> <!-- Row 2, Col 1 -->
<div>5</div> <!-- Row 2, Col 2 -->
</div>
<!-- Explicitly set row (to revert from gafc) -->
<div class="dg gtcr3-1fr gafr gap16px">
<div>Items are placed in row direction</div>
</div>gafcgrid-auto-flow: column
Arranges items in column direction (top to bottom), moving to the next column when full. Used for timelines, newspaper-style layouts, and other cases needing column-first placement.
<!-- Column direction (gtr required!) -->
<div class="dg gtcr3-1fr gtrr2-1fr gafc gap16px">
<div>1</div> <!-- Col 1, Row 1 -->
<div>2</div> <!-- Col 1, Row 2 -->
<div>3</div> <!-- Col 2, Row 1 -->
<div>4</div> <!-- Col 2, Row 2 -->
<div>5</div> <!-- Col 3, Row 1 -->
</div>
<!-- Vertical card flow -->
<div class="dg gtrr3-auto gafc gap16px">
<div class="bg18181B p16px br8px">First</div>
<div class="bg18181B p16px br8px">Second</div>
<div class="bg18181B p16px br8px">Third</div>
<div class="bg27272A p16px br8px">Fourth (Next column)</div>
</div>Caution
When using gafc, you must define the number of rows with gtr(grid-template-rows) for expected behavior. Without defining rows, all items are placed in a single row.
gafdgrid-auto-flow: dense
When gaps appear, later items are pulled forward to fill empty spaces. Useful for efficiently using space in card lists with different sizes, image galleries, etc.
<!-- Dense gallery layout -->
<div class="dg gtcr3-1fr gafd gap16px">
<div class="bg18181B p2rem br8px" style="grid-column: span 2">Wide Card 1</div>
<div class="bg27272A p2rem br8px">Card 2</div>
<div class="bg27272A p2rem br8px" style="grid-column: span 2">Wide Card 3</div>
<div class="bg18181B p2rem br8px">Card 4 - fills gap</div>
<div class="bg18181B p2rem br8px">Card 5</div>
</div>
<!-- Image gallery -->
<div class="dg gtcrfit-minmax20rem-1fr gafd gap8px">
<img src="photo1.jpg" class="w100p br8px" />
<img src="photo2.jpg" class="w100p br8px" style="grid-column: span 2" />
<img src="photo3.jpg" class="w100p br8px" />
<img src="photo4.jpg" class="w100p br8px" />
</div>dense placement -- Filling gaps
Without dense, a gap appears before item 3; dense pulls item 4 forward to fill it
Caution: Order may change
dense can cause visual order to differ from DOM order. This may affect keyboard tab order and screen reader reading order, so be mindful of accessibility.
gafrdgrid-auto-flow: row dense
Applies row-direction placement + dense packing together. Same effect as gafd (since default direction is row).
<!-- row dense (same effect as gafd) -->
<div class="dg gtcr4-1fr gafrd gap16px">
<div class="bg18181B p16px br8px" style="grid-column: span 2">2 col</div>
<div class="bg27272A p16px br8px">1 col</div>
<div class="bg18181B p16px br8px" style="grid-column: span 3">3 col</div>
<div class="bg27272A p16px br8px">Fills previous gap via dense</div>
</div>gafcdgrid-auto-flow: column dense
Applies column-direction placement + dense packing together. Used when gaps need to be filled in column-first layouts.
<!-- column dense -->
<div class="dg gtcr3-1fr gtrr3-auto gafcd gap16px">
<div class="bg18181B p16px br8px" style="grid-row: span 2">Vertical 2 rows</div>
<div class="bg27272A p16px br8px">1 row</div>
<div class="bg27272A p16px br8px">1 row</div>
<div class="bg18181B p16px br8px" style="grid-row: span 2">Vertical 2 rows</div>
<div class="bg27272A p16px br8px">Fills gap via dense</div>
</div>Responsive Usage
Combined with media query prefixes, you can change placement direction based on screen size.
<!-- Desktop: column → Mobile: row -->
<div class="dg gtcr3-1fr gtrr2-1fr gafc sm-gafr gap16px">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<!-- dense only on desktop -->
<div class="dg gtcr3-1fr gafd sm-gafr gap16px">
<div>Dense layout, normal below 768px</div>
</div>| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">Class Combination | Behavior |
|---|---|
gafc sm-gafr | Default column direction, row direction at 768px and below |
gafd sm-gafr | Default dense placement, normal row at 768px and below |
gafr md-gafc | Default row direction, column direction at 1024px and below |
Tips & Notes
gafr can be omitted
Since the default of grid-auto-flow is row, gafr does not need to be specified explicitly. Only used to revert from gafc.
dense is ideal for galleries
Using different-sized image cards with gafd produces dense packing without gaps. Suitable for Pinterest-style layouts.
gafc + gtr required combination
When using gafc, you must define a row template with gtr. Otherwise, all items are placed in a single row.