YouTipPr Grid Auto Flow
## CSS `grid-auto-flow` Property
The `grid-auto-flow` CSS property controls how the auto-placement algorithm works for grid items that are not explicitly positioned using grid placement properties. It defines exactly how these auto-placed items are packed into the grid.
---
## Quick Example
To arrange auto-placed grid items column by column (instead of the default row-by-row behavior):
```css
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: column;
}
```
---
## Browser Support
The numbers in the table specify the first browser version that fully supports the `grid-auto-flow` property.
| Property | Chrome | Edge | Firefox | Safari | Opera |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **`grid-auto-flow`** | 57 | 16 | 52 | 10 | 44 |
---
## Property Definition and Usage
When you have grid items that you do not explicitly position on the grid, the auto-placement algorithm kicks in to automatically arrange them. The `grid-auto-flow` property tells the browser whether to flow these items into rows or columns, and whether to use a "dense" packing algorithm to fill in empty gaps.
### Specifications
| Feature | Description |
| :--- | :--- |
| **Default Value** | `row` |
| **Inherited** | No |
| **Animatable** | Yes (Read more about (css-animatable.html)) |
| **CSS Version** | CSS Grid Layout Module Level 1 |
| **JavaScript Syntax** | `object.style.gridAutoFlow = "row dense"` |
---
## Syntax
```css
grid-auto-flow: row | column | dense | row dense | column dense;
```
### Property Values
| Value | Description |
| :--- | :--- |
| **`row`** | **Default value.** The auto-placement algorithm places items by filling each row in turn, adding new rows as necessary. |
| **`column`** | The auto-placement algorithm places items by filling each column in turn, adding new columns as necessary. |
| **`dense`** | Tells the auto-placement algorithm to use a "dense" packing algorithm. If smaller items appear later in the markup, the browser will attempt to backfill them into empty gaps left earlier in the grid. This can maximize space efficiency but may disrupt the visual reading order. |
| **`row dense`** | Tells the algorithm to fill rows sequentially, but allows items to move backward to fill in empty gaps left earlier in the row sequence. |
| **`column dense`** | Tells the algorithm to fill columns sequentially, but allows items to move backward to fill in empty gaps left earlier in the column sequence. |
---
## Code Examples
### Example 1: Default Flow (`row`) vs. Column Flow (`column`)
By default, grid items flow row by row. If you change the flow to `column`, items will stack vertically first.
```css
/* Items flow horizontally, wrapping to the next row */
.row-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row; /* Default */
}
/* Items flow vertically, wrapping to the next column */
.column-container {
display: grid;
grid-template-rows: repeat(3, 50px);
grid-auto-flow: column;
}
```
### Example 2: Packing Gaps with `row dense`
When some grid items span multiple tracks, they can leave empty gaps in the grid. Using `row dense` tells the browser to look ahead and pull smaller items back to fill those gaps.
```css
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
/* Fill rows and backfill any empty gaps with smaller items */
grid-auto-flow: row dense;
}
/* A larger item that might create a gap */
.item-special {
grid-column: span 2;
grid-row: span 2;
}
```
---
## Important Considerations
1. **Accessibility (DOM Order vs. Visual Order):**
Using the `dense` keyword can cause items to appear out of order visually compared to their order in the HTML source code. This can create a confusing experience for keyboard users (tabbing) and screen reader users, as the focus order will follow the DOM structure, not the visual layout. Use `dense` with caution.
2. **Implicit Tracks:**
When using `grid-auto-flow: column`, the grid will generate *implicit columns* if there are more items than defined tracks. You can control the size of these auto-generated columns using the `grid-auto-columns` property. Conversely, use `grid-auto-rows` to size implicit rows generated by `grid-auto-flow: row`.
---
## Related Articles
* CSS Tutorial: (css-grid.html)