CSS grid-auto-flow Property

CSS grid-auto-flow property defines how auto-placed grid items get flowed into the grid.

By default, the grid-auto-flow property is set to row. This means that the grid container is filled row-wise. That is, at first the very first row is filled with grid items, then the second row, and then the third row, and so on until all grid items are filled in the rows.

In the example below, the grid container is filled column-wise as we have used grid-auto-flow: column;. Try it out:

Example:

.grid-container{
  display: grid;
  grid-auto-flow: column;
}

CSS Syntax

The grid-auto-flow property has the following syntax:

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

Property Values

The grid-auto-flow property accepts the following values:

rowThis is the default value. The grid items are placed row-wise.
columnThe grid items are placed column-wise.
denseIf the grid items are of different sizes, the dense keyword tries to place the grid items in such a way that there is minimum possible vacant space in the grid.
row denseIf the grid items are of different sizes, the row dense keyword tries to place the grid items in such a way that there is minimum possible vacant space in the grid rows.
column denseIf the grid items are of different sizes, the column dense keyword tries to place the grid items in such a way that there is minimum possible vacant space in the grid columns.
initialSets the grid-auto-flow property to its default value(row).
inheritInherits the grid-auto-flow property from the parent element.

General Info

Default Valuerow
InheritedNo
JavaScript Usageelement.style.gridAutoFlow = “column”

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment