The grid-auto-flow property controls how items that are not explicitly placed are automatically arranged inside a CSS grid.
Item flow.
Default flow.
Vertical fill.
Fill gaps.
New tracks.
Grid parent.
The grid-auto-flow property in CSS is used to control how auto-placed items are inserted into the grid. When items are not explicitly positioned, the grid-auto-flow property determines their placement.
This property is particularly useful in creating responsive and dynamic grid layouts.
Set grid-auto-flow on a grid container with display: grid. Items without explicit placement follow the flow direction you choose. Use row for classic left-to-right layouts, column for vertical-first layouts, and add dense to backfill empty cells.
grid-auto-flow only affects auto-placed items. If you set grid-column or grid-area on an item, that item keeps its explicit position.
The syntax for the grid-auto-flow property is as follows:
element {
grid-auto-flow: value;
}.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row;
}The default value of the grid-auto-flow property is row.
row or column) plus an optional dense keyword.grid-auto-rows and grid-auto-columns to size new implicit tracks.| Question | Answer |
|---|---|
| Initial value | row |
| Applies to | Grid containers |
| Inherited | No |
| Controls | Auto-placement direction |
| Optional keyword | dense |
| Value | Description |
|---|---|
row | Places items by filling each row, adding new rows as necessary |
column | Places items by filling each column, adding new columns as necessary |
row dense | Places items by filling each row, trying to fill in gaps in earlier rows if possible |
column dense | Places items by filling each column, trying to fill in gaps in earlier columns if possible |
Default row flow with five items in a three-column grid (items 4–5 wrap to row 2):
Compare row and column auto-flow, then see how dense packing fills gaps left by spanning items.
Start with the reference example — row flow versus column flow side by side.
Create two grids and compare how items are placed with row and column.
.row { grid-auto-flow: row; }
.column { grid-auto-flow: column; }With row, items fill left to right then wrap to the next row. With column, items fill top to bottom in each column before moving to the next column.
Five items in a three-column grid using the default row placement.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
grid-auto-flow: row;
gap: 10px;
}Items 1–3 fill the first row. Items 4 and 5 start a second row because no explicit placement was set.
Use dense to backfill holes when some items span multiple cells.
Compare normal row flow with dense packing when a wide item leaves a gap.
.wide { grid-column: span 2; }
.dense { grid-auto-flow: row dense; }When a spanning item leaves a hole, normal row flow may skip it. row dense tries to place later items into earlier empty cells.
Build a horizontal layout where items fill columns first, useful for carousels and toolbars.
.toolbar {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
gap: 0.75rem;
}Column auto-flow stacks items horizontally. Each button becomes its own implicit column sized to its content.
dense changes visual placement.grid-auto-flow Worksgrid-template-columns and rows set the starting tracks.
Items without explicit placement enter the grid in document order.
The browser fills rows or columns and optionally backfills gaps with dense.
Items land in predictable positions without manual placement on every cell.
The grid-auto-flow property is supported in most modern browsers, including recent versions of Chrome, Firefox, Safari, Edge, and Opera.
Auto-placement flow works in all major modern grid implementations.
Bottom line: Safe for modern projects. Test dense layouts for reading-order impact.
The grid-auto-flow property is an essential tool for web developers working with CSS Grid layouts. It provides flexibility in how auto-placed items are arranged within the grid, allowing for more dynamic and responsive designs.
By understanding and utilizing this property, you can create more efficient and visually appealing grid layouts for your web projects. Start with row, then experiment with column and dense when you need tighter packing.
row for standard page layoutscolumn for horizontal strips and toolbarsgrid-auto-rows or grid-auto-columnsdense when visual order must match DOM ordergrid-auto-flowUse these points when controlling auto-placement.
Item direction.
PurposeLeft to right.
DefaultTop to bottom.
PatternBackfill holes.
KeywordNot placed items.
ScopeOpen the HTML editor, switch between row and column flow, and watch auto-placement change.
5 people found this page helpful