<div class="kapsul">
  <div>Bir</div>
  <div>İki</div>
  <div>Üç</div>
  <div>Dört</div>
  <div>Beş</div>
  <div>Altı</div>
  <div>Yedi</div>
  <div>Sekiz</div>
  <div>Dokuz</div>
  <div>On</div>
</div>
.kapsul {
  display: grid;
  grid: auto-flow dense 50px / repeat(3, [line1 line2] minmax(20em, max-content));
}

.kapsul div:nth-child(1) {
  background: #05ffb0;
}

.kapsul div:nth-child(2) {
  background: #00e7eb;
}

.kapsul div:nth-child(3) {
  background: #ff3860;
}

.kapsul div:nth-child(4) {
  background: #b86bff;
}

.kapsul div:nth-child(5) {
  background: pink;
}

.kapsul div:nth-child(6) {
  background: purple;
}

.kapsul div:nth-child(7) {
  background: yellow;
}

.kapsul div:nth-child(8) {
  background: green;
}

.kapsul div:nth-child(9) {
  background: gray;
}

.kapsul div:nth-child(10) {
  background: blue;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.