CSS grid-auto-flow Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

grid-auto-flow: row;

grid-auto-flow: column;

grid-auto-flow: row dense;

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

HTML

<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>

CSS

.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;
}

Result

Editor