<div class="container-cols">
  <div class="row">
    <div class="scale col-1">1</div>
    <div class="scale col-1">2</div>
    <div class="scale col-1">3</div>
    <div class="scale col-1">4</div>
    <div class="scale col-1">5</div>
    <div class="scale col-1">6</div>
    <div class="scale col-1">7</div>
    <div class="scale col-1">8</div>
    <div class="scale col-1">9</div>
    <div class="scale col-1">10</div>
    <div class="scale col-1">11</div>
    <div class="scale col-1">12</div>
  </div>
  
  <div class="row">
    <div class="item col-6">col-6</div>
    <div class="item col-6">col-6</div>
  </div>
  
  <div class="row">
    <div class="item col-4">col-4</div>
    <div class="item col-4">col-4</div>
    <div class="item col-4">col-4</div>
  </div>
  
  <div class="row">
    <div class="item col-3">col-3</div>
    <div class="item col-3">col-3</div>
    <div class="item col-3">col-3</div>
    <div class="item col-3">col-3</div>
  </div>
  
  <div class="row">
    <div class="item col-2">col-2</div>
    <div class="item col-8">col-8</div>
    <div class="item col-2">col-2</div>
  </div>
</div>
.container-cols .row {
  display: flex;
  gap: 5px;
}
.col-1 {
  flex-basis: 8.3333333333%;
  box-sizing: border-box;
}
.col-2 {
  flex-basis: 16.6666666667%;
  box-sizing: border-box;
}
.col-3 {
  flex-basis: 25%;
  box-sizing: border-box;
}
.col-4 {
  flex-basis: 33.3333333333%;
  box-sizing: border-box;
}
.col-5 {
  flex-basis: 41.6666666667%;
  box-sizing: border-box;
}
.col-6 {
  flex-basis: 50%;
  box-sizing: border-box;
}
.col-7 {
  flex-basis: 58.3333333333%;
  box-sizing: border-box;
}
.col-8 {
  flex-basis: 66.6666666667%;
  box-sizing: border-box;
}
.col-9 {
  flex-basis: 75%;
  box-sizing: border-box;
}
.col-10 {
  flex-basis: 83.3333333333%;
  box-sizing: border-box;
}
.col-11 {
  flex-basis: 91.6666666667%;
  box-sizing: border-box;
}
.col-12 {
  flex-basis: 100%;
  box-sizing: border-box;
}

/* DECORATION */
.scale {
  background-color: #666;
  color: #ccc;
  text-align: center;
  margin: 3px 0;
}
.item {
  text-align: center;
  padding: 10px 3px;
  margin: 3px 0;
  border: 1px solid #ccc;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.