Layout a colonne responsive

L'autore dell'articolo, Nick La, ci spiega come realizzare un layout a colonne che si adatti sempre bene con tutte le varie risoluzioni.
Layout a colonne responsive

Specifiche sulla traduzione

Di seguito la traduzione dell’articolo “Responsive Column Layouts” di Nick La.

Un trucco per i Layout a colonne

Solitamente, per creare un layout a colonne, dovresti aggiungere classi al primo e all’ultimo elemento per azzerare il margine e rimuovere il “float”. Oggi condividerò un trucco CSS molto semplice per creare un layout a colonne responsive usando la pseudo classe nth-of-type. Uso questo trucco per codificare i temi di WordPress su Themify. Non è richiesta nessuna classe first o last e il numero di colonne può cambiare a seconda del viewport. In altre parole, si può alternare il layout da 4 colonne a 3, a 2 ecc…

Lo svantaggio di usare le classi first e last

Normalmente aggiungeremmo una classe .first e .last per resettare il margine e il float nella griglia. Aggiungere queste classi è molto seccante, per non parlare del fatto che diventa più complicato se hai bisogno di renderlo responsive.

first and last class

Usare “nth-of-type”

L’espressione “nth-of-type” (An+B) rende semplice resettare il “float” e il margine senza dover aggiungere le classi .first o .last. Per esempio:

  • .grid4 .col:nth-of-type(4n+1) = seleziona ogni 4° elemento .col, a partire dal primo
  • .grid3 .col:nth-of-type(3n+1) = seleziona ogni 3° elemento .col, a partire dal primo
  • .grid2 .col:nth-of-type(2n+1) = seleziona ogni 2° elemento .col, a partire dal primo

nth of type columns

.grid4 .col:nth-of-type(4n+1),
.grid3 .col:nth-of-type(3n+1),
.grid2 .col:nth-of-type(2n+1) {
	margin-left: 0;
	clear: left;
}

Renderlo responsive con media queries

Per renderlo responsive e fluido, usa valori percentuali invece di valori in pixel.

/* col */
.col {
	background: #eee;
	float: left;
	margin-left: 3.2%;
	margin-bottom: 30px;
}

/* grid4 col */
.grid4 .col {
	width: 22.6%;
}

/* grid3 col */
.grid3 .col {
	width: 31.2%;
}

/* grid2 col */
.grid2 .col {
	width: 48.4%;
}

Cambiare da 4 colonne a 3 colonne

Per cambiare da 4 colonne a 3 colonne su una larghezza del viewport inferiore a 740px:

  1. Cambiare la larghezza di .grid4 .col a 31,2% (un terzo della larghezza)
  2. Resettare il margine sinistro e il clear
  3. Riapplica il margine sinistro e il clear usando nth-of-type(3n+1) per formare una griglia a 3 colonne

responsive-columns

Cambiare da 4 e 3 colonne a 2 colonne

Per cambiare da 4 e 3 colonne a 2 colonne su un viewport inferiore a 600px: fondamentalmente usate lo stesso trick come sopra per resettare la larghezza .col e il float.

@media screen and (max-width: 600px) {
	/* change grid4 to 2-column */
	.grid4 .col {
		width: 48.4%;
	}
	.grid4 .col:nth-of-type(3n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid4 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}

	/* change grid3 to 2-column */
	.grid3 .col {
		width: 48.4%;
	}
	.grid3 .col:nth-of-type(3n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid3 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}
}

Rendere tutte le colonne fullwidth

Per rendere tutte le colonne fullwidth su un viewport inferiore a 400px: imposta larghezza al 100% e resetta margine e float.

@media screen and (max-width: 400px) {
	.col {
		width: 100% !important;
		margin-left: 0 !important;
		clear: none !important;
	}
}

Problemi con Internet Explorer

Sia le media queries che “:nth-of-type” non sono supportati da Internet Explorer 8 o precedenti. Potete usare selectivizr.js per fornire supporto sullo pseudo selettore “nth-of-type” a Internet Explorer e respond.js per le media queries. Sfortunatamente, selectivizr.js e respond.js non lavorano bene insieme (ad esempio, “nth-of-type” non funziona all’interno delle media queries). Ciò significa che l’unico piano alternativo con le griglie responsive è che le colonne non possano essere cambiate da 4 a 3 oppure a 2.

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github