grid-auto-flow

Definition

The grid-auto-flow property is used to determine the order in which grid items are placed into the grid container's rows and columns, and how the grid will be filled if there are more items than grid cells.

Examples

Placing items in rows:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row;
}

Placing items in columns:

.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-auto-flow: column;
}

Using the dense value:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
}

Values

Best Practices

• Use the row or column values to specify the default order in which grid items should be placed in the grid.
• Use the dense value if you want to fill in empty grid cells, but be aware that this may cause items to be repositioned in unexpected ways.
• Use media queries to adjust the grid-auto-flow property for different screen sizes if necessary.
• Be aware that the order in which grid items are placed in the grid can affect their accessibility and usability, so it's important to consider the order of your content when designing your grid layout.
• Remember that grid-auto-flow only applies to items that don't have a specific position set using the grid-row and grid-column properties. Be sure to use these properties to position important grid items explicitly.

Browser Compatibility