Grid-auto-flow

Understand what is grid-auto-flow

  1. To good understand how grid-auto-flow works we add in our page some pictures with diferents sizes.
  2. grid-auto-flow allow us to control automatic placement for the elements, by default grid-auto-flow is row so the browser will try to fill each row with the elements. The column instructions will organize the elements by filling each columns. And finally the dense instructions will try to fill each whole in our grid so we have an impression of disorder.
  3. In some divs we add some big, vertical and horizontal class who allow us to change their size.
  4. We place our div randomly with grid-column: auto / span 2 and grid-row: auto / span 2 so that grid-auto-flow can perfectly work.
  5. Let's explain what is auto and span [number], so auto means that your element will be place randomly in function of grid-auto-flow and span [number] means take the number of columns or row indicate.