Grid Auto Placement Property
Last updated: 2026-09-13
grid-auto-flow Grid Auto Placement Property
The grid-auto-flow property controls how grid items that are not explicitly positioned are placed automatically. It decides whether the items fill by row or by column, and whether the dense packing mode is enabled to fill the gaps in the layout. The property has a direct impact on the overall ordering of the grid.
| Category | |
|---|---|
| Initial Value | row |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
grid-auto-flow: row | column | row dense | column dense;⚙️ Values
| Value | Type | Description |
|---|---|---|
row | column | row dense | column dense | Keyword | Auto placement direction and dense packing |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| grid-auto-flow | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： row fills the grid row by row (the default); column fills it column by column.
Tip： The dense keyword enables dense packing: smaller items that come later move back to fill the gaps left by larger items, but the visual order may change.
❓ FAQ
QWhen should I use the dense mode?
AUse dense when the items have different sizes and the auto placement leaves gaps; it lets the later, smaller items move back to fill the earlier holes, maximizing the use of space. But dense pushes the visual order away from the DOM order, while screen readers and keyboard navigation still follow the DOM, so the reading may jump around. Be careful in accessibility-sensitive contexts.
QWhat does grid-auto-flow: column look like?
AItems first fill the first column from top to bottom, then move to the next column, flowing in a direction perpendicular to the default row-first filling. With column, the extra items create implicit columns to the right rather than implicit rows below, which is the orientation you want for horizontally arranged lists. It suits column-oriented content such as vertical reading flows, timelines and columns of related cards. You can also write grid-auto-flow: column dense to enable dense packing while filling column by column.
QHow do I build a masonry layout with CSS Grid?
AA common approach is grid-auto-flow: row dense together with cards of different heights given grid-row: span 2 or span 3, combined with grid-auto-rows for uniform row heights; dense then fills the holes. But dense disrupts the visual/DOM order and affects accessibility. Note that the native grid masonry implementation is still experimental and behind a flag in some engines, so for production sites column-count remains the more portable fallback when preserving order and browser coverage matter.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
Grid Shorthand
Shorthand that defines a grid in one declaration
Grid Column Tracks
Defines the structure of grid columns
