Progettazione web reattiva - Vista griglia

Cos'è una vista griglia?

Molte pagine web sono basate su una vista griglia (grid-view), il che significa che la pagina è divisa in alcune colonne:

Utilizzare la vista griglia durante la progettazione del sito web è molto utile. In questo modo è più facile posizionare gli elementi sulla pagina.

Una vista griglia reattiva di solito ha 12 colonne, una larghezza totale del 100%, e si restringe e si espande quando si aggiusta la dimensione della finestra del browser.

Costruire una vista griglia reattiva

Iniziamo a costruire una vista griglia reattiva.

Prima di tutto, assicurati che tutti gli elementi HTML box-sizing l'attributo è impostato su border-boxIn questo modo si garantisce che la larghezza e l'altezza totali degli elementi includano il margine interno (riempimento) e il bordo.

Aggiungi il seguente codice nel CSS:

* {
  box-sizing: border-box;
}

Visita il nostro Box Sizing CSS Leggi di più sull'attributo box-sizing in questo capitolo.

Esempio: questo esempio mostra una pagina web reattiva semplice, che contiene due colonne:

25%
75%

Esempio

.menu {
  larghezza: 25%;
  float: left;
}
.main {
  larghezza: 75%;
  float: left;
}

Prova personalmente

Se il sito web contiene solo due colonne, l'esempio sopra è abbastanza buono.

Ma, vogliamo utilizzare una vista a griglia reattiva con 12 colonne per controllare meglio il sito web.

Prima di tutto, dobbiamo calcolare la percentuale di una colonna: 100% / 12 colonne = 8.33%.

Poi, creiamo una classe per ogni colonna delle 12 colonne, ossia class="col-" e un numero, che definisce il numero di colonne che questa sezione dovrebbe coprire:

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%;}

Prova personalmente

Tutte queste colonne dovrebbero muoversi a sinistra e avere un margine interno di 15px:

CSS:

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

Ogni riga dovrebbe essere circondata da <div> In totale, il numero di colonne in linea dovrebbe essere 12:

HTML:

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

Tutte le colonne in linea si muovono a sinistra, quindi escono dal flusso della pagina e lasciano spazio per altri elementi, come se non esistessero queste colonne. Per prevenire questo, aggiungeremo uno stile di pulizia del flusso:

CSS:

.row::after {
  content: "";
  clear: both;
  display: table;
}

Vogliamo aggiungere alcune stili e colori per renderlo più bello:

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;
}

Prova personalmente

Attenzione, quando riduci la larghezza della finestra del browser a un valore molto piccolo, la pagina esempio non appare idealmente. Nel capitolo successivo, imparerai come risolvere questo problema.