<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.