How TO - Gemengde kolomindeling
Leer hoe u een gemengd kolomlay-outraster maakt met CSS.
Leer hoe u een responsieve kolomindeling maakt die varieert tussen 4 kolommen, 2 kolommen en kolommen over de volledige breedte, afhankelijk van de schermbreedte.
Pas het formaat van het browservenster aan om het responsieve effect te zien:
Een gemengde kolomlay-out maken
Stap 1) HTML toevoegen:
Voorbeeld
<div class="row">
<div class="column"></div>
<div
class="column"></div>
<div
class="column"></div>
<div
class="column"></div>
</div>
Stap 2) CSS toevoegen:
In dit voorbeeld zullen we een lay-out met vier kolommen maken die wordt omgezet in twee kolommen op schermen die minder dan 900 px breed zijn. Op schermen die minder dan 600px breed zijn, worden de kolommen echter op elkaar gestapeld in plaats van naast elkaar te zweven.
Voorbeeld
/* 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%;
}
}
Tip: Ga naar onze CSS Website Layout Tutorial voor meer informatie over website layouts.
Tip: ga naar onze CSS Responsive Web Design Tutorial voor meer informatie over responsive webdesign en rasters.