<div class="container container--first">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
</div>
<div class="container container--second">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
</div>
:root {
  --yellow: #ffc600;
}

.container {
  display: grid;
  grid-gap: 20px;
  &--first {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));  
  }
  &--second {
    margin-top: 20px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

.item {
  display: grid;
  justify-content: center;
  align-items: center;
  border: 5px solid rgba(0, 0, 0, 0.03);
  border-radius: 3px;
  font-size: 35px;
  background-color: var(--yellow);
}

.item p {
  margin: 0 0 5px 0;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.