Come fare per - Layout di colonne miste
Scopri come creare una griglia di layout di colonne miste con CSS.
Scopri come creare un layout di colonna reattivo che varia tra 4 colonne, 2 colonne e colonne a larghezza intera a seconda della larghezza dello schermo.
Ridimensiona la finestra del browser per vedere l'effetto reattivo:
Come creare un layout di colonne miste
Passaggio 1) Aggiungi HTML:
Esempio
<div class="row">
<div class="column"></div>
<div
class="column"></div>
<div
class="column"></div>
<div
class="column"></div>
</div>
Passaggio 2) Aggiungi CSS:
In questo esempio, creeremo un layout a quattro colonne che si trasformerà in due colonne su schermi larghi meno di 900 px. Tuttavia, su schermi di larghezza inferiore a 600 px, le colonne si accatastano l'una sull'altra invece di fluttuare l'una accanto all'altra.
Esempio
/* 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%;
}
}
Suggerimento: vai al nostro tutorial CSS sul layout del sito Web per saperne di più sui layout del sito Web.
Suggerimento: vai al nostro tutorial di progettazione web reattiva CSS per saperne di più sul design web reattivo e sulle griglie.