Responsive Web Design - Visualizzazione a griglia
Che cos'è una vista griglia?
Molte pagine Web si basano su una visualizzazione a griglia, il che significa che la pagina è divisa in colonne:
L'uso di una visualizzazione a griglia è molto utile durante la progettazione di pagine Web. Semplifica il posizionamento degli elementi nella pagina.
Una visualizzazione griglia reattiva ha spesso 12 colonne e ha una larghezza totale del 100% e si ridurrà e si espanderà man mano che ridimensioni la finestra del browser.
Esempio: visualizzazione griglia reattiva
Costruire una visualizzazione griglia reattiva
Iniziamo a creare una visualizzazione griglia reattiva.
Innanzitutto assicurati che tutti gli elementi HTML abbiano la box-sizingproprietà impostata su
border-box. Ciò assicura che il riempimento e il bordo siano inclusi nella larghezza e nell'altezza totali degli elementi.
Aggiungi il seguente codice nel tuo CSS:
* {
box-sizing: border-box;
}
Maggiori informazioni sulla box-sizingproprietà nel nostro capitolo CSS Box Sizing .
L'esempio seguente mostra una semplice pagina Web reattiva, con due colonne:
Esempio
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}
L'esempio sopra va bene se la pagina web contiene solo due colonne.
Tuttavia, vogliamo utilizzare una visualizzazione griglia reattiva con 12 colonne, per avere un maggiore controllo sulla pagina web.
Per prima cosa dobbiamo calcolare la percentuale per una colonna: 100% / 12 colonne = 8,33%.
Quindi creiamo una classe per ciascuna delle 12 colonne class="col-"e un numero che definisce il numero di colonne che deve occupare la sezione:
CSS:
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;}
Tutte queste colonne dovrebbero essere mobili a sinistra e avere un riempimento di 15px:
CSS:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
Ogni riga dovrebbe essere racchiusa in un file <div>. Il numero di colonne all'interno di una riga deve sempre essere 12:
HTML:
<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>
Le colonne all'interno di una riga sono tutte fluttuanti a sinistra, e quindi vengono estratte dal flusso della pagina e gli altri elementi verranno posizionati come se le colonne non esistessero. Per evitare ciò, aggiungeremo uno stile che azzera il flusso:
CSS:
.row::after {
content: "";
clear: both;
display: table;
}
Vogliamo anche aggiungere alcuni stili e colori per renderlo migliore:
Esempio
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
Si noti che la pagina Web nell'esempio non ha un bell'aspetto quando si ridimensiona la finestra del browser a una larghezza molto ridotta. Nel prossimo capitolo imparerai come risolverlo.