Comment - Disposition en colonnes mixtes
Apprenez à créer une grille de disposition de colonnes mixtes avec CSS.
Apprenez à créer une disposition de colonne réactive qui varie entre 4 colonnes, 2 colonnes et des colonnes pleine largeur en fonction de la largeur de l'écran.
Redimensionnez la fenêtre du navigateur pour voir l'effet réactif :
Comment créer une disposition de colonnes mixtes
Étape 1) Ajoutez du HTML :
Exemple
<div class="row">
<div class="column"></div>
<div
class="column"></div>
<div
class="column"></div>
<div
class="column"></div>
</div>
Étape 2) Ajoutez CSS :
Dans cet exemple, nous allons créer une mise en page à quatre colonnes qui se transformera en deux colonnes sur des écrans de moins de 900 pixels de large. Cependant, sur les écrans de moins de 600 pixels de large, les colonnes s'empileront les unes sur les autres au lieu de flotter les unes à côté des autres.
Exemple
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
}
/* Clear floats */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes a two column-layout
instead of four columns */
@media screen and (max-width: 900px) {
.column {
width: 50%;
}
}
/* Responsive layout - makes the two columns
stack on top of each other instead of next to each other */
@media
screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Conseil : accédez à notre didacticiel sur la mise en page de sites Web CSS pour en savoir plus sur les mises en page de sites Web.
Conseil : accédez à notre didacticiel CSS Responsive Web Design pour en savoir plus sur la conception Web réactive et les grilles.