Come posso creare una mia griglia di colonne CSS responsive?

Come posso creare una mia griglia di colonne CSS responsive?

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.

Torna su