Comment créer : layout de colonnes mélangées

Apprenez à créer un réseau de layout de colonnes mélangées en utilisant CSS.

Apprenez à créer un layout de colonnes responsive qui peut passer de quatre colonnes à deux colonnes et à une colonne pleine largeur en fonction de la largeur de l'écran.

Ajustez la taille de la fenêtre du navigateur pour voir l'effet responsive :

Essayer personnellement

Comment créer un layout de colonnes mélangées

Première étape - Ajoutez HTML :

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

Deuxième étape - Ajoutez CSS :

Dans cet exemple, nous allons créer un layout de quatre colonnes, qui passe à deux colonnes lorsque la largeur de l'écran est inférieure à 900 pixels. Cependant, lorsque la largeur de l'écran est inférieure à 600 pixels, les colonnes s'empilent plutôt que de s'aligner en ligne.

/* Créez quatre colonnes égales, afin qu'elles flottent ensemble */
.column {
  float: left;
  width: 25%;
}
/* Supprimez le flottement */
.row:after {
  content: "";
  display: table;
   clear: both;
}
/* Mise en page responsive - Changez la mise en page en deux colonnes plutôt que en quatre colonnes */
@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  }
}
/* Mise en page responsive - Faites que les deux colonnes se superposent plutôt que de s'aligner en ligne */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Essayer personnellement

Pages connexes

Tutoriel :Mise en page de site web CSS

Tutoriel :Conception de site web réactif CSS