grid-auto-flow : CSS Grid :: flex-direction : Flexbox

In the Flexbox layout, after the parent element is set to display: flex , the child elements are arranged horizontally by default. Use the flex-direction attribute (or flex-flow abbreviation) to arrange child elements vertically into a column.

So, how does CSS Grid implement similar columnar arrangements? For example, you want the child elements to be arranged in the following way:

 <code>1 3 5 7 -------- 2 4 6 8</code>

Instead of the default:

 <code>1 2 3 4 -------- 5 6 7 8</code>

By default, CSS Grid layout child elements are also arranged horizontally like Flexbox. The following example creates a grid of 6 columns and 2 rows, with the child elements first filling the first row and then the second row:

 <code>.parent { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, 150px); gap: 20px; }</code>

To implement columnar fill (i.e. "column wrap"), that is, the child element first fills the two rows of the first column and then fills the second column, you can use grid-auto-flow attribute. This property controls how the grid container fills unoccupied space. Just set:

 <code>.parent { display: grid; grid-auto-flow: column; /* 设置列和行*/ }</code>

By default, grid-auto-flow is row and the child elements are filled with rows first. Once it is set to column , each new element will first fill all the space in the first column, then move to the second column, and so on.

 <code>.parent { display: grid; grid-auto-flow: column; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, 150px); }</code>

grid-auto-flow attribute can be regarded as the equivalent of the flex-direction attribute in CSS Grid. It controls the filling method of elements in the grid and avoids the tedious operation of manually setting the position of each element. Understanding grid-auto-flow attributes is essential for efficient use of CSS Grid.

The above is the detailed content of grid-auto-flow : CSS Grid :: flex-direction : Flexbox. For more information, please follow other related articles on the PHP Chinese website!