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

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