Nombre de colonnes variable

Affichage d'un nombre variable de colonnes en fonction de la largeur du viewport à l'aide des media queries.

Le rendu

Redimensionnez la fenêtre du navigateur pour voir le changement de rendu.

Principe

Pour l'exemple, on utilise comme conteneur un élément <ul> auquel nous affectons le style minimum suivant : 

#liste {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
}

On crée autant d'éléments « entête de colonne » que l'on souhaite afficher de colonnes sur écran large. Nous avons donc au départ, pour cet exemple, le html suivant : 

<ul id="liste">
  <li class="entete">Colonne #1</li>
  <li class="entete">Colonne #2</li>
  <li class="entete">Colonne #3</li>
  <li class="entete">Colonne #4</li>
  <li class="entete">Colonne #5</li>
</ul>

Tous ces éléments sont masqués, sauf le premier via le CSS : 

#liste .entete {
  display: none;
  font-weight: 700;
  background-color: #EFEFEF;
}
#liste li:nth-child(1) {
  display: inherit;       /* rétabli le display par défaut */
}

Pour tous les éléments de la liste on applique le même CSS initial à savoir : 

#liste li {
  flex-basis: 100%;
  box-sizing: border-box;
}

Par défaut on aura donc un élément par ligne.

Suivant la largeur du viewport, et à l'aide des média queries en testant la propriété min-width, on va masquer/afficher les « entête de colonne » nécessaires et modifier la propriété flex-basis des éléments pour ajuster les largeurs au nombre de colonnes à afficher.

Cela va se traduire par : 

@media (min-width:576px) {
  #liste li:nth-child(2) {    /* on affiche l'entête colonne 2 */
    display: inherit;
  }
  #liste li {
    flex-basis: 50%;          /* réajuste largeur des éléments */
  }
}
@media (min-width:768px) {
  #liste li:nth-child(3) {    /* on affiche l'entête colonne 3 */
    display: inherit;
  }
  #liste li {
    flex-basis: 33.3333%;     /* réajuste largeur des éléments */
  }
}
@media (min-width:992px) {
  #liste li:nth-child(4) {    /* on affiche l'entête colonne 4 */
    display: inherit;
  }
  #liste li {
    flex-basis: 25%;          /* réajuste largeur des éléments */
  }
}
@media (min-width:1200px) {
  #liste li:nth-child(5) {    /* on affiche l'entête colonne 5 */
    display: inherit;
  }
  #liste li {
    flex-basis: 20%;          /* réajuste largeur des éléments */
  }
}

Ressources