<p>By default, <code>grid-auto-flow</code> uses the sparse algorithm to place grid items. Check the checkbox to change it to dense and see how the grid items become tightly packed.</p>
<input type="checkbox" class="flow-switcher" id="dense">
<label for="dense">grid-auto-flow: dense</label>
<div class="container">
  <div class="grid__item a">A</div>
  <div class="grid__item b">B</div>
  <div class="grid__item c">C</div>
  <div class="grid__item d">D</div>
  <div class="grid__item e">E</div>
  <div class="grid__item f">F</div>
  <div class="grid__item g">G</div>
  <div class="grid__item h">H</div>
  <div class="grid__item i">I</div>
  <div class="grid__item j">J</div>
  <div class="grid__item k">K</div>
  <div class="grid__item l">L</div>
  <div class="grid__item m">M</div>
  <div class="grid__item n">N</div>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  max-width: 700px;
  
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15ch, 1fr));
  grid-gap: 1em;
}

.flow-switcher:checked ~ .container {
  grid-auto-flow: dense;
}

.grid__item {
  background-color: lightgreen;
  padding: 1em;
}

.c {
  grid-row: span 2;
}

.j {
  grid-column: span 3;
}

.g {
  grid-column: span 3;
  grid-row: span 2;
}

.n {
  grid-column: span 2;
}