SOURCE

<div class="container">
  <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 class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
  <div class="item item11">11</div>
</div>

.container {
  width: 500px;
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-gap:10px;
}

.item {
    background-color: orange;
}
.item1 {
   background-color: slateblue;
}
.item2 {
    background-color: saddlebrown;
}
.item3 {
    background-color: salmon;
}
.item4 {
    background-color: skyblue;
}
.item5 {
    background-color: palegoldenrod;
}
.item6 {
    background-color: palegreen;
}
.item7 {
    background-color: paleturquoise;
}
.item8 {
    background-color: papayawhip;
}
.item9 {
    background-color: plum;
}
.item10 {
    background-color: pink;
}
.item11 {
    background-color: slateblue;
}