The New CSS Layout, un estratto

Come abbiamo visto, flexbox non è stato progettato per i grid layout, ma è proprio questo il caso in cui la nostra più nuova specifica dà il meglio di sé. CSS Grid Layout fa esattamente quello che il suo nome suggerisce: permette la creazione di layout a griglia in CSS. Ossia, layout bidimensionali: disporre contemporaneamente cose come una riga e una colonna. Vedremo numerosi esempi di Grid Layout nel resto di questo libro, ma cominciamo a vedere come Grid può risolvere il problema che abbiamo avuto quando abbiamo cercato di usare flexbox per una griglia.

In questo esempio, sto creando una griglia a tre colonne (Fig 3.17). Il mio container ha display: grid e ho creato tre colonne di larghezza uguale con la proprietà grid-template-columns, più una nuova unità creata per Grid: un’unità di lunghezza flessibile nota come fr. Nel Capitolo 5 esamineremo più da vicino questa unità; per ora, tenete a mente che rappresenta una frazione dello spazio disponibile nel grid container. Con tre track ciascuna impostata a 1fr, lo spazio disponibile è diviso in tre e distribuito equamente. Questo è tutto quello che dobbiamo fare per far sì che il figlio diretto del container venga mostrato come una griglia. A differenza di flexbox, non dobbiamo aggiungere alcuna regola ai figli: semplicemente, appariranno da soli in ogni cella della griglia.

.cards {
	margin: 0 -10px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

Fig 3.17: Il grid layout di base.

Come potete vedere, gli item formano una griglia in senso stretto, senza che noi si debba dare loro una qualsiasi larghezza. Possiamo risolvere un’altra questione che abbiamo quando creiamo una flexbox grid, usando proprietà che fanno parte della specifica Grid. Per creare dei gap tra i nostri flex item, nel nostro esempio flexbox abbiamo usato dei margin sui flex item e poi abbiamo dovuto aggiungere un margine negativo al container per tener conto dei margin left e right indesiderati sugli item dell’estrema sinistra e destra. CSS Grid Layout include una proprietà grid-gap che distanzia gli item. Questa proprietà è la shorthand per grid-column-gap e grid-row-gap, che possono anche essere specificate individualmente.

Per dimostrare come funziona, ho rimosso i margin dagli item e il margine negativo dal container e ho distanziato gli item con grid-gap. Produrrete lo stesso identico layout di prima nel browser, ma senza il bisogno di trafficare con margin e margini negativi.

.cards {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 20px;
}

Proprio mentre questo libro andava in stampa, il CSS Working Group ha espresso l’intenzione di cambiare il nome delle proprietà grid-gap. grid-column-gap diventerà column-gap, grid-row-gap diventerà row-gap e la shorthand grid-gap sarà semplicemente gap. Inoltre, la definizione di queste proprietà è stata spostata nella Box Alignment Specification. Questo significa che in futuro, anche flexbox potrebbe supportare i gap nello stesso modo in cui lo fa Grid.

Dal momento che i browser hanno già rilasciato queste proprietà, nell’immediato futuro faranno l’alias dei nomi grid-* con i nuovi nomi. Al momento in cui scrivo, nessun browser supporta i nuovi nomi di tali proprietà, quindi ho conservato le versioni grid-* in questi esempi. Se volete essere sicuri di supportare entrambe le versioni, non c’è ragione per non elencarle entrambe nel vostro CSS, come in questo esempio:

.cards {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 20px;
	gap: 20px;
}

Posizionare gli item nella griglia#section1#section1

Possiamo rapidamente allontanarci da quello che flexbox ci permette di fare sfruttando la nostra griglia bidimensionale e posizionandovi gli item. Il modo più semplice per farlo è di usare i numeri di linea. Una griglia ha le linee della griglia numerate: cominciano da 1 sia per le righe sia per le colonne. Notate che queste linee sono numerate secondo la modalità di scrittura del documento. Lavorando in inglese, una lingua da sinistra a destra, left-to-right (LTR), la linea della colonna 1 è sul lato sinistro della griglia, la linea della riga 1 è in alto. In arabo, una lingua da destra a sinistra, right-to-left (RTL), la linea della colonna 1 appare sulla destra della griglia. Il lato estremo della griglia (a destra in una lingua LTR e a sinistra in una lingua RTL) è rappresentato da -1.

.cards {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 20px;
}
.card1 {
	grid-column: 1 / 3;
	grid-row: 1;
}
.card2 {
	grid-column: 3;
	grid-row: 1;
}
.card3 {
	grid-column: 1;
	grid-row: 2 / 4;
}
.card4 {
	grid-column: 2 / 4;
	grid-row: 2;
}
.card5 {
	grid-column: 2 / 4;
	grid-row: 3;
}

Fig 3.18: Card piazzate sulla griglia per numero di linea.

Qui potete immediatamente vedere parte del potere di Grid Layout. Potete occupare colonne e righe, cosa molto difficile da fare usando gli esistenti metodi di layout. Il colore di sfondo delle nostre card si estende al gutter, anche se il contenuto è più breve. Inoltre, è molto facile cambiare fino a che punto si estende un blocco: possiamo perfino lasciare uno spazio vuoto! Se cambio la linea di inizio della card 3 alla linea della riga 3, otteniamo una cella vuota (Fig 3.19). Nella cella della griglia non può mettersi nulla: questo comportamento è diverso da quello di float, che cerca di risalire e occupare lo spazio disponibile.

Fig 3.19: Lo spazio vuoto è reso semplice con CSS Grid Layout.

Un altro metodo per posizionare gli item su una griglia comporta l’utilizzo di aree con nomi. Questo permette di descrivere i propri layout direttamente nel CSS. Per fare ciò con il nostro esempio, per prima cosa diamo un nome ad ogni card cone la proprietà grid-area. Sto usando solo le lettere da a a e.

.card1 { grid-area: a; }
.card2 { grid-area: b; }
.card3 { grid-area: c; }
.card4 { grid-area: d; }
.card5 { grid-area: e; }

Poi, aggiungo la proprietà grid-template-areas al container. Il valore di questa proprietà descrive come dovrebbe apparire il nostro layout (Fig 3.20).

.cards {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 20px;
	grid-template-areas:
		"a a b"
		"c d d"
		"c e e";
}

Fig 3.20: Il valore di grid-template-areas mostra visivamente come appare il nostro layout.

Ci sono alcune cose da tenere a mente con grid-template-areas. Per distribuire su più celle, ripetiamo il nome dell’area. Card 1 si estende sulle prime due column track: pertanto, a viene ripetuta. Le aree devono essere rettangolari per natura—non possiamo ancora creare un’area a forma di L.

Per lasciare dello spazio vuoto e per lasciare una cella vuota, usiamo il carattere del punto. Se sostituite la prima c con ., quella cella rimarrà vuota quando il layout verrà creato (Fig 3.21).

.cards {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 20px;
	grid-template-areas:
		"a a b"
		". d d"
		"c e e";
}

Fig 3.21: Adesso ci rimane dello spazio nel nostro layout.

Se i nomi delle vostre grid-area sono più lunghi di un carattere, vi consiglio di allineare le righe e le colonne visivamente nel valore di grid-template-areas. Ciò è possibile perché più di un carattere punto può denotare una cella vuota, se non c’è uno spazio tra loro. Potete anche aggiungere più di un carattere di spazio per distanziare i nomi delle grid-area.

Questo è un modo molto carino per lavorare con i layout, dato quanto è facile spostare in giro gli item. Mi piace lavorare così durante la fase di prototipazione: piuttosto che preoccuparmi del modo in cui ottenere un layout, posso capire quale sia il modo migliore per presentare la mia interfaccia. Poi posso ritornare al markup e assicurarmi che sia in ordine logico basandomi su quelle decisioni.

Con questi pochi esempi, avete già sufficiente conoscenza per cominciare a usare Grid Layout e per prendere decisioni in merito a quali metodi di layout usare. C’è dell’altro a venire, ma tenete a mente che sebbene la specifica sia estesa e possiate fare molte cose, la sua idea centrale è molto semplice. Potete fare molto con molto poco CSS. Man mano che cominciate a creare layout, avrete delle domande e vorrete ottenere sempre di più con questi metodi di layout. Qui è dove entra in gioco il resto di questo libro!