The grid-auto-flow specifies the placement of items in a grid.
By default, grid items will flow in rows, from left to right.
Other options include column, row dense, etc.
A grid container with grid-auto-flow set to column.
The items are packed top to bottom, then left to right.
<style>
.grid-container {
background-color: steelblue;
padding: 10px;
display: grid;
grid-gap: 10px;
grid-template-rows: auto auto auto;
grid-auto-flow: column;
}
.grid-container > div {
background-color: aliceblue;
text-align: center;
padding: 15px 5px;
font-size: 18px;
}
</style>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
grid-auto-flow: row | column | dense |
row dense | column dense;
| Value | Description |
|---|---|
| row | Default. Fills the grid by row. |
| column | Fills the grid by column. |
| dense | Fill any holes in the grid. |
| row dense | Fills the grid by row and any holes. |
| column dense | Fills the grid by column and any holes. |
Click the buttons to see the different grid-auto-flow values.
<style>
.grid-container-example {
background-color: steelblue;
padding: 10px;
display: grid;
grid-gap: 10px;
grid-template-rows: auto auto auto;
grid-template-columns: auto auto auto auto;
grid-auto-flow: row;
}
.grid-container-example > div {
background-color: aliceblue;
text-align: center;
padding: 15px 5px;
font-size: 18px;
}
</style>
<div class="grid-container-example">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
This table shows when grid-auto-flow support started for each browser.
 Chrome
|
57 | Mar 2017 |
 Firefox
|
52 | Mar 2017 |
 IE/Edge
|
16 | Sep 2017 |
 Opera
|
44 | Mar 2017 |
 Safari
|
10 | Sep 2016 |
