Comment - Mise en page à trois colonnes
Apprenez à créer une grille de mise en page à 3 colonnes avec CSS.
Comment créer une mise en page à trois colonnes
Étape 1) Ajoutez du HTML :
Exemple
<div class="row">
<div class="column"></div>
<div
class="column"></div>
<div
class="column"></div>
</div>
Étape 2) Ajoutez CSS :
Dans cet exemple, nous allons créer trois colonnes égales :
Exemple
.column {
float: left;
width: 33.33%;
}
/* Clear floats after the
columns */
.row:after {
content: "";
display: table;
clear: both;
}
Dans cet exemple, nous allons créer trois colonnes inégales :
Exemple
.column {
float: left;
}
.left, .right {
width: 25%;
}
.middle {
width: 50%;
}
Dans cet exemple, nous allons créer une mise en page réactive à trois colonnes :
Exemple
/* Responsive layout - when the screen is less than 600px wide, make the
three
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.