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
Computed value
As specified
Animatable
Yes
JavaScript syntax
object.style.gridAutoFlow

Interactive Demo

One
Two
Three
Four
Five

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

The following table will show you the current browser support for the CSS grid-auto-flow property.

Desktop
Edge Chrome Firefox Opera Safari
1657524410.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
57524310.3657

Last updated by CSSPortal on: 2nd January 2024