Creare una griglia di colonne CSS non richiede altro che dei semplici calcoli per ottenere la larghezza base di una singola colonna.
La prima cosa da stabilire è il numero massimo di colonne. Se ad esempio il numero massimo è 12, la colonna più piccola avrà una larghezza in percentuale di
8.3333%
, ossia 100 / 12
.
Continuando in questo modo divideremo 100 per 11, 100 per 10 e così via. Quindi potremo avere i seguenti stili:
.column {
float: left;
}
.column-12 {
width: 8.3333%;
}
/* Continua */
@media screen and (max-width: 768px) {
/* Responsive */
.column {
float: none;
}
.column-12,
.column-11
/* Continua */ {
width: auto;
}
}
Come si può notare, rendere responsive la nostra griglia significa usare le Media Queries per resettare gli stili iniziali.