<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%);
} */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.