SOURCE

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

.container {
    display: grid;
    text-align: center;
    line-height: 100px;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
}

.container>div:nth-child(1){
    background: #AFF4B8;
}
.container>div:nth-child(2){
    background: #FFE978;
}
.container>div:nth-child(3){
    background: #58FFF4;
}.container>div:nth-child(4){
    background: #E7B4FE;
}.container>div:nth-child(5){
    background: #92FBCC;
}.container>div:nth-child(6){
    background: #F99C62;
}