<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>
// Test
// Grille flexbox
//
// @param {Cols} $cols [12] - Nombre de colonnes 
// @param {Gutter} $gutter [5px] - Largeur de la gouttière
// @param {Prefix} $prefix [col] - Prefixe pour les noms des classes

@mixin grid-flex($cols: 12, $gutter: 5px, $prefix: col) {
  .container-cols .row {
    display: flex;
    gap: $gutter; 
  }

  @for $i from 1 through $cols {
    .#{$prefix}-#{$i} {
      $w: 100% / $cols * $i;
      flex-basis: $w;
      box-sizing: border-box;
    }
  }
}

/* MIXIN DEMO */
@include grid-flex();

/* 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;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.