grid-auto-flow

Definition

The grid-auto-flow CSS property is used in grid layouts to control how additional grid items are automatically placed into the grid when there is no explicit placement defined for them.

The grid-auto-flow property accepts several values:

• row (default): Automatically places grid items in rows, filling each row before moving on to the next.
• column: Automatically places grid items in columns, filling each column before moving on to the next.
• dense: Similar to row or column, but attempts to fill in any empty grid cells to minimize gaps.

Here’s an example:

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

In this example, the grid-auto-flow: column; rule sets the automatic placement of additional grid items in columns. The grid is defined with three columns using grid-template-columns, and any additional items beyond the defined grid will be placed in subsequent columns, creating a column-based grid structure.

The grid-auto-flow property provides control over how additional grid items are placed when there is no explicit placement defined, allowing for flexible and dynamic grid layouts.