grid-auto-flow # 23

grid-auto-flow

The grid-auto-flow property controls how auto-placed items get inserted into the grid.


Syntax

.container {
  grid-auto-flow: row | column | row dense | column dense;
}

Code Example

.grid-container {

  display: grid;

  grid-template-columns: auto auto auto;

  grid-template-rows: auto auto;

  grid-auto-flow: column; // use row |  row dense | column dense

  grid-gap: 10px;

  background-color: #2196F3;

  padding: 10px;

}


.grid-container > div {

  background-color: rgba(255, 255, 255, 0.8);

  text-align: center;

  padding: 20px 0;

  font-size: 30px;

}






























Post a Comment

Previous Post Next Post