How Can I Create a Vertically-Aligned Grid in CSS?

Using CSS Grid Layout to Create a Vertically-Aligned Grid

When working with CSS Grid Layout, it is possible to encounter situations where you desire to create a grid that flows vertically instead of the default horizontal flow. While CSS Flexbox provides the flex-direction property for overriding the flow direction, CSS Grid Layout currently lacks a similar attribute that explicitly specifies the desired flow.

In CSS Grid Layout, the grid-auto-flow property is responsible for determining the direction of the grid's item placement. When set to row (the default value), items flow horizontally, creating new rows as needed. Conversely, setting grid-auto-flow to column would cause items to flow vertically, creating new columns as necessary.

However, this desired behavior cannot be achieved solely with CSS Grid Layout. To create a grid that fills vertically in the specified number of columns without defining rows, CSS Multi-Column Layout is a suitable alternative to consider. Unlike CSS Grid Layout, CSS Multi-Column Layout allows for creating multi-column layouts with automatic column flow, ensuring that the grid items fill in vertically until a new column is needed.

CSS Multi-Column Layout Example:

#container {
  columns: 3;  /* Specify the number of columns */
}

#container div {
  margin-left: 5px;  /* Add some margin for clarity */
}

<div>

By utilizing CSS Multi-Column Layout, you can achieve the desired vertically-aligned grid layout with the specified number of columns without defining rows, overcoming the limitations of CSS Grid Layout in this particular scenario.

The above is the detailed content of How Can I Create a Vertically-Aligned Grid in CSS?. For more information, please follow other related articles on the PHP Chinese website!