<div class="grid">
<div class="grid__col grid__col_3">1</div>
<div class="grid__col grid__col_3">2</div>
<div class="grid__col grid__col_3">3</div>
</div>
<div class="grid">
<div class="grid__col grid__col_5">1</div>
<div class="grid__col grid__col_5">2</div>
<div class="grid__col grid__col_5">3</div>
<div class="grid__col grid__col_5">4</div>
<div class="grid__col grid__col_5">5</div>
</div>
* { box-sizing: border-box; }
.grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.grid__col {
background: orange;
flex: 1;
}
/* .grid__col_3 {
width: calc(33%);
}
.grid__col_5 {
width: calc(20%);
} */
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.