Columns

by Simon Hi

HTML

<div class="cartouche">
  <div class="noir marge-bas largeur"></div>
  <div class="jaune marge-bas largeur"></div>
  <div class="bleu marge-bas largeur"></div>
  <div class="violet marge-bas largeur"></div>
  <div class="vert marge-bas largeur"></div>
  <div class="orange marge-bas largeur"></div>
  <div class="gris marge-bas largeur"></div>
  <div class="cyan marge-bas largeur"></div>
  <div class="magenta marge-bas largeur"></div>
  <div class="rouge marge-bas largeur"></div>
  <div class="marron marge-bas largeur"></div>
  <div class="turquoise marge-bas largeur"></div>
  <div class="noir marge-bas largeur"></div>
  <div class="jaune marge-bas largeur"></div>
  <div class="bleu marge-bas largeur"></div>
  <div class="violet marge-bas largeur"></div>
</div>

CSS

.noir {
  background-color: black;
  height: 200px;
}

.jaune {
  background-color: yellow;
  height: 400px;
}

.bleu {
  background-color: blue;
  height: 300px;
}

.violet {
  background-color: purple;
  height: 100px;
}

.vert {
  background-color: green;
  height: 200px;
}

.orange {
  background-color: orange;
  height: 300px;
}

.gris {
  background-color: gray;
  height: 400px;
}

.cyan {
  background-color: cyan;
  height: 300px;
}

.magenta {
  background-color: magenta;
  height: 300px;
}

.rouge {
  background-color: red;
  height: 300px;
}

.marron {
  background-color: brown;
  height: 300px;
}

.turquoise {
  background-color: turquoise;
  height: 300px;
}

.cartouche {
  columns: 4;
  padding: 1em 1em 1px 1em;
  background-color: silver;
}

.marge-bas {
  margin-bottom: 1em;
}

.largeur {
  min-width: 10em;
  break-inside: avoid;
}

@media only screen and (max-width: 45em) {
  .cartouche {
    columns: 3;
  }
}

@media only screen and (max-width: 34em) {
  .cartouche {
    columns: 2;
  }
}

@media only screen and (max-width: 23em) {
  .cartouche {
    columns: 1;
  }
}