CSS grid-auto-flow Property

Description

The grid-auto-flow property determines how the automatic layout algorithm works for implicitly created layout elements, indicating how they will be placed in the layout grid. In order to set the size of implicitly created columns in the layout grid container, you can use the grid-auto-columns property, and the grid-auto-rows property is used to specify the size of implicitly created columns.

Initial value
row
Applies to
Grid containers
Inherited
No
Media
Visual
Computed value
As specified
Animatable
Yes
CSS Version
CSS3
JavaScript syntax
object.style.gridAutoFlow

Syntax

grid-auto-flow: [ row | column ] || dense

Values

  • rowA keyword that indicates that the automatic placement algorithm places elements by filling each line in turn, adding new lines as needed. This is the default value.
  • columnA keyword that indicates that the automatic placement algorithm places elements by filling each column in turn, adding new columns as needed.
  • denseA keyword indicating that the automatic placement algorithm uses a "dense" element placement algorithm that attempts to fill previously formed voids in the grid if appropriate-sized elements appear in the layout further. This can lead to the appearance of elements not in the order they are indicated, while filling holes left by large elements. If this dense keyword is omitted, then a "sparse" algorithm is used that places the elements in the grid without backing down to fill in the voids . This ensures that all automatically placed elements are displayed "in order", even if this leaves voids that could be filled with later elements.

Example

<body>
<select id="direction" onchange="changeGridAutoFlow()">
<option value="column">column</option>
<option value="row">row</option>
</select>
<label><input id="dense" type="checkbox" onchange="changeGridAutoFlow()">dense</label>
<div class="grid-container">
<div class="item-a">A</div>
<div class="item-b">B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
</div>
<script>
function changeGridAutoFlow() {
const grid = document.getElementsByClassName("grid-container")[0];
direction = document.getElementById("direction");
dense = document.getElementById("dense");
let gridAutoFlow = direction.value === "row" ? "row" : "column";

if ( dense.checked) {
gridAutoFlow += " dense";
}

grid.style.gridAutoFlow = gridAutoFlow;
}
</script>
</body>
.grid-container {
   display: grid;
   margin-top: 5px;
   padding: 10px;
   background: rgb(0,150,208);
}
.grid-container > div { 
   background: rgb(241,101,41);
   border: 1px solid #000;
   text-align: center; 
} 
.grid-container {
   grid-template: repeat(4, 1fr) / 1fr 1fr;
   grid-auto-flow: column;
}
.item-a {
   grid-row-start: 2; 
   background: red !important; 
}
.item-b {
   grid-column-start: 2;
   background: yellow !important;
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
X1657524410.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
5757524310.36.0