How to Make a CSS Grid Container Fill Columns Instead of Rows?

Make Grid Container Fill Columns, Not Rows

In CSS Grid Layout, the grid-auto-flow property determines whether items are laid out in rows or columns. When set to row, which is the default setting, items are placed horizontally, creating new rows as needed. This behavior is typically not ideal if the desired layout is vertical.

When grid-auto-flow is set to row, grid-template-columns defines the number of columns in the grid. However, in this scenario, the items still flow horizontally, filling up the rows rather than the columns.

For a vertically-flowing grid that creates new columns as necessary, without defining rows, consider using CSS Multi-Column Layout instead. It allows for vertical stacking of items, automatically creating new columns as needed.

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: row;
}

This code snippet illustrates the concept. Items will flow horizontally, creating new rows as necessary, despite the definition of three columns in the grid-template-columns property. Note that using CSS Grid Layout for this specific layout is not recommended.

The above is the detailed content of How to Make a CSS Grid Container Fill Columns Instead of Rows?. For more information, please follow other related articles on the PHP Chinese website!