<div class="wrap">
  <h2>auto-fill</h2>
  <div class="container auto-fill">
    <div class="item"></div>
    <div class="item"></div>
  </div>  
</div>

<div class="wrap">
  <h2>auto-fill</h2>
  <div class="container auto-fit">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

* {
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

h2 {
  line-height: 1.5;
}

.wrap {
  margin-right: 20px;
}

.container {
  background: #eee;
  width: 200px;
  display: grid;
  grid-template-rows: repeat(4, 50px);
}

.item {
  background: #fff;
  border-radius: 12px;
  border: 2px solid #222;
}

.auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
}

.auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
}