CSS grid-auto-flow Property


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
Applies to
Grid containers
Computed value
As specified
CSS Version
JavaScript syntax


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


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


<select id="direction" onchange="changeGridAutoFlow()">
<option value="column">column</option>
<option value="row">row</option>
<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>
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;
.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

Explorer Edge Chrome Firefox Opera Safari
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung

Last updated by CSSPortal on: 6th November 2019