grid-auto-flow
Decides how items without an explicit position fill the grid.
- Initial value
row- Inherited
- No
- Animatable
- no
- Applies to
- grid containers
- JavaScript
element.style.gridAutoFlow = "column"
Example
#.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: dense;
gap: 8px;
}
.gallery .big {
grid-column: span 2;
grid-row: span 2;
}<div class="gallery stage">
<div class="box">1</div><div class="box big">2</div><div class="box">3</div>
<div class="box">4</div><div class="box">5</div><div class="box">6</div>
</div>Definition and usage
#The grid-auto-flow property controls the automatic placement algorithm. By default (row), items fill the grid row by row, and new rows are added at the bottom. With column, the grid fills up by columns and grows to the right.
The dense keyword turns on dense packing: the browser goes back to earlier gaps and fills them with smaller items that appear later in the source. It’s useful in galleries with items of different sizes.
dense mode can change the visual order of items relative to the code, which affects keyboard navigation. Use it only where the order doesn’t matter.
Syntax
#grid-auto-flow: row | column | row dense | column dense;Values
#Values in practice
#row
.demo { grid-auto-flow: row; }row dense
.demo { grid-auto-flow: row dense; }column
.demo { grid-auto-flow: column; }
.wide { grid-column: auto; grid-row: span 2; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#densemode works best in photo galleries, where the order doesn’t matter.- For horizontal card lists, combine
grid-auto-flow: columnwithgrid-auto-columns.
Related entries
#Spotted a mistake or missing an example? Write to us.