grid-auto-flow property
The grid-auto-flow property specifies
an automatic placement of elements in a grid. It
can have the row value - fills rows
with elements, column - columns,
dense - places elements on all empty
spaces in the grid; row dense - arranges
elements, filling each row and all free spaces
of the grid; column dense - fills
each column and all free space in the
grid with elements.
Syntax
selector {
grid-auto-flow: part of a grid to fill;
}
Example
Let's fill in all the rows in the table:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-auto-flow: row;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Example
Now let’s fill all the columns in the table with elements:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-auto-flow: column;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Example
Let's place all the elements in the table so that there is no empty space left:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-auto-flow: dense;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Example
Now let's fill all the free space in the rows with elements:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-auto-flow: row dense;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Example
Let's change the previous example so that the elements fill all the empty space in the columns:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-auto-flow: column dense;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
See also
-
the
gridproperty
that specifies a shorthand for columns and rows properties -
the
grid-auto-rowsproperty
that specifies a number and width of rows in an implicit grid -
the
grid-template-columnsproperty
that specifies a number and width of columns in a grid -
the
grid-template-rowsproperty
that specifies a number and width of rows in a grid