How Can I Make a CSS Grid Fill Vertically with a Fixed Number of Columns?

Make Grid Container Fill Columns, Not Rows

Question:

How can I create a CSS grid that fills in vertically instead of horizontally, allowing for an arbitrary number of rows while maintaining a fixed number of columns?

Answer:

While CSS Grid Layout cannot natively handle this specific layout, CSS Multi-Column Layout offers a solution.

CSS Multi-Column Layout:

#container {
  column-count: 3;
}

This code defines a container with three columns that will automatically create new columns as necessary, meeting the vertical-flow requirement.

CSS Grid Layout Limitations:

In CSS Grid Layout, grid-auto-flow and grid-template-columns have an inverse relationship:

• With grid-auto-flow: row (the default) and grid-template-columns defined, items flow horizontally, automatically creating new rows.
• However, reversing these properties (grid-auto-flow: column and grid-template-rows defined) results in an invalid declaration.

Therefore, achieving a vertically-filling grid with a fixed number of columns is not possible using CSS Grid Layout alone.

The above is the detailed content of How Can I Make a CSS Grid Fill Vertically with a Fixed Number of Columns?. For more information, please follow other related articles on the PHP Chinese website!