In this section, we will learn what the grid-auto-flow property is and how to use it in CSS.

Click here to run the example of grid-auto-flow property.

CSS grid-auto-flow Property Definition and Usage

By default, when we create a grid, grid-items within this grid are positioned from left to right in the first row of the grid until all the cells of that row are filled with each item, then the next row’s cells will be filled with each item and this process will keep going until all the elements positioned in each cell of the grid.

But we can reverse this process using the CSS `grid-auto-flow` property.

This means all grid-items will be positioned in the cells of the first column until all the available cells in the first column get filled; then the next column will be used to fill the rest of the items (if any) in this fashion and this process goes on until there’s no item left.

CSS grid-auto-flow Property Syntax

grid-auto-flow: row|column|dense|row dense|column dense;

CSS grid-auto-flow Property Value

Here’s the list of values we can set for `grid-auto-flow` property:

• row: this is the default value and when used, items will be positioned in grid-cells from left to right in each row.
• column: Using this value, items will be positioned in grid-cells of each column starting from the first left column, filling its cells moving towards the next columns.
• dense: Using this value, the “auto-placement algorithm” uses a “dense” packing algorithm, which attempts to fill in holes earlier in the grid if smaller items come up later.

Note: This may cause items to appear out-of-order, when doing so would fill in holes left by larger items.

Also “dense” value comes up with either “row” or “column” as well.

Example1= grid-auto-flow: row dense;

Actually, because the default value of `grid-auto-flow` is row, we could just add “dense” to this property which is equal to the example one.

Example2 = grid-auto-flow: dense;

Example3 = grid-auto-flow: column dense;

Example: grid-auto-flow property in CSS

See the Pen grid-auto-flow property in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.