{"id":723,"date":"2017-04-11T19:37:19","date_gmt":"2017-04-11T17:37:19","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/css-grid-in-pratica-aggiungere-grid-a-un-design-esistente\/"},"modified":"2017-04-11T19:37:19","modified_gmt":"2017-04-11T17:37:19","slug":"css-grid-in-pratica-aggiungere-grid-a-un-design-esistente","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/css-grid-in-pratica-aggiungere-grid-a-un-design-esistente\/","title":{"rendered":"CSS Grid in pratica: aggiungere Grid a un design esistente"},"content":{"rendered":"

Comprendere e usare CSS Grid \u00e8 pi\u00f9 semplice di quel che pensate. Il giorno in cui il supporto per Grid \u00e8 apparso in Firefox 52, ho deciso cos\u00ec su due piedi di convertire il layout di base del mio sito personale<\/a> utilizzando Grid ed \u00e8 stato un processo piuttosto semplice: cinque minuti per scrivere gli stili della griglia seguiti da 15-20 minuti per la risoluzione dei problemi.<\/p>\n

Grid ci permette di definire letteralmente le linee delle colonne e delle righe della griglia e poi di attaccare degli elementi a quelle linee nell’ordine che decidiamo. Suona come tabelle, ma Grid \u00e8 molto<\/em> molto pi\u00f9 di quello che potessimo sognare con le tabelle. Significa pi\u00f9 layout responsive, documenti molto pi\u00f9 accessibili e un markup molto pi\u00f9 pulito di quello che ci siamo mai potuti permettere con i float e il posizionamento.<\/p>\n

Sono passati decenni da quando CSS \u00e8 apparso per la prima volta, ma non ha mai avuto un sistema come questo. E Grid \u00e8 gi\u00f9 supportato sia in Chrome sia in Firefox, con il supporto di Safari imminente (al momento in cui scrivo le sue release Technology Preview supportano Grid). Sta sorgendo proprio in questo momento<\/em> una nuova era nel digital design.<\/p>\n

\n

Come funzionavano le cose<\/h2>\n

Prima di arrivare a Grid, permettetemi un momento per spiegare la struttura del markup delle pagine principali di meyerweb e l’approccio \u201cpositioning-and-margin\u201d che ho usato per circa 12 anni. Ecco come \u00e8 strutturato il markup:<\/p>\n

\n<<\/span>body<\/span>><\/span><\/span>\n   <<\/span>div<\/span> id<\/span>=<\/span>\"<\/span>sitemast\"<\/span><\/span>><\/span><\/span>\u2026<\/<\/span>div<\/span>><\/span><\/span>\n   <<\/span>div<\/span> id<\/span>=<\/span>\"<\/span>search\"<\/span><\/span>><\/span><\/span>\u2026<\/<\/span>div<\/span>><\/span><\/span>\n   <<\/span>div<\/span> id<\/span>=<\/span>\"<\/span>main\"<\/span><\/span>><\/span><\/span>\u2026<\/<\/span>div<\/span>><\/span><\/span>\n   <<\/span>div<\/span> id<\/span>=<\/span>\"<\/span>extra\"<\/span><\/span>><\/span><\/span>\u2026<\/<\/span>div<\/span>><\/span><\/span>\n   <<\/span>div<\/span> id<\/span>=<\/span>\"<\/span>navigate\"<\/span><\/span>><\/span><\/span>\u2026<\/<\/span>div<\/span>><\/span><\/span>\n   <<\/span>div<\/span> id<\/span>=<\/span>\"<\/span>footer\"<\/span><\/span>><\/span><\/span>\u2026<\/<\/span>div<\/span>><\/span><\/span>\n<\/<\/span>body<\/span>><\/span><\/span>\n<\/code>\n<\/pre>\n
Alcuni di questi ID sono superstiti idiosincratici della mia visione delle convenzioni di layout e naming dei primi anni 2000. Per esempio, #extra<\/code> \u00e8 quello che la maggior parte di noi chiamerebbe #sidebar<\/code>. #sitemast<\/code> sta per #masthead<\/code>. E #footer<\/code> proviene da un’epoca antecedente all’arrivo dell’effettivo elemento <footer><\/code>.<\/p>\n
I div<\/code> (che probabilmente oggi sarebbero section<\/code>, ma adesso non importa) sono sistemati in modo che se il CSS non dovesse caricarsi, o se si utilizzasse un browser vocale per navigare il sito, allora la testata (masthead) del sito sarebbe la prima, la possibilit\u00e0 di cercare nel sito sarebbe la seconda e il contenuto principale della pagina sarebbe terzo. Dopo di che, seguono i materiali extra, la navigazione del sito e il footer.<\/p>\n
Tutti questi sono stati tenuti insieme in un layout con il posizionamento assoluto dei div<\/code> di navigazione e ricerca. Il sitemast \u00e8 stato impostato ad un’altezza di 192px<\/code> e a entrambe i div<\/code> di navigazione e ricerca \u00e8 stato dato top: 192px;<\/code> per mostrarli proprio sotto a questo. Per lasciare margine a questi, sono stati applicati dei top margin ai div<\/code> main ed extra. (Fig. 1<\/strong>)<\/p>\n
\"Screenshot<\/p>\n
Fig. 1: Homepage di meyerweb (tagliata)<\/p>\n<\/div>\n<\/div>\n
\n
Costruire la griglia<\/h2>\n
Quindi, questo \u00e8 il modo in cui le cose sono state disposte fin dalla met\u00e0 del 2005, pi\u00f9 o meno. A un certo punto ho giochicchiato con flexbox come esperimento, ma non l’ho mai pubblicato perch\u00e9 sembrava goffo usare un tool di layout unidimensionale per gestire un layout bidimensionale. Probabilmente, avrei dovuto convertire la barra di navigazione a flexbox, ma sono stato distratto da altro e non ci sono pi\u00f9 tornato su.<\/p>\n
Dopotutto, Grid stava arrivando. Nel periodo precedente al rilascio al pubblico di Grid, mi sono concentrato sull’apprendere e insegnare Grid, creando dei test case e usandolo per creare delle div per la pubblicazione. Poi, il 7 marzo 2017, \u00e8 arrivato al pubblico in Firefox 52. Ho twittato e postato un articolo<\/a> e una demo<\/a> che avevo messo insieme la sera prima e mi sono seduto meravigliandomi che quel giorno fosse finalmente arrivato. Dopo pi\u00f9 di venti anni di CSS, finalmente, un sistema di layout reale, un insieme di propriet\u00e0 e valori progettati fin dal principio per quello scopo.<\/p>\n
E poi ho deciso, pi\u00f9 o meno in quell’istante, di convertire il mio sito personale perch\u00e9 utilizzasse Grid per il suo layout di livello principale. Mi ci sono voluti meno di cinque minuti per uscirmene con quello che segue:<\/p>\n
\nbody <\/span>{<\/span>\n   display<\/span>:<\/span> grid;<\/span>\n   grid-template-rows<\/span>:<\/span> 192px min-content min-content 1fr;<\/span>\n   grid-template-columns<\/span>:<\/span> 1fr 20em;<\/span>\n}<\/span>\n\n#sitemast <\/span>{<\/span>\n   grid-row<\/span>:<\/span> 1;<\/span> \n   grid-column<\/span>:<\/span> 1 \/ span 2;<\/span>\n}<\/span>\n\n#search <\/span>{<\/span>\n   grid-row<\/span>:<\/span> 2;<\/span> \n   grid-column<\/span>:<\/span> 2;<\/span>\n}<\/span>\n\n#main <\/span>{<\/span>\n   grid-row<\/span>:<\/span> 3;<\/span> \n   grid-column<\/span>:<\/span> 1;<\/span>\n}<\/span>\n\n#extra  <\/span>{<\/span>\n   grid-row<\/span>:<\/span> 3;<\/span> \n   grid-column<\/span>:<\/span> 2;<\/span>\n}<\/span>\n\n#navigate <\/span>{<\/span>\n   grid-row<\/span>:<\/span> 2;<\/span> \n   grid-column<\/span>:<\/span> 1;<\/span>\n}<\/span>\n\n#footer <\/span>{<\/span>\n   grid-row<\/span>:<\/span> 4;<\/span> \n   grid-column<\/span>:<\/span> 1;<\/span>\n}<\/span>\n<\/code>\n<\/pre>\n
Questo non \u00e8 tutto quello che dovevo fare, ma \u00e8 la parte centrale. Lasciate che ve la spieghi.<\/p>\n
\nbody <\/span>{<\/span>\n   display<\/span>:<\/span> grid;<\/span>\n   grid-template-rows<\/span>:<\/span> 192px min-content min-content 1fr;<\/span>\n   grid-template-columns<\/span>:<\/span> 1fr 20em;<\/span>\n}<\/span>\n<\/code>\n<\/pre>\n
Questa parte del CSS imposta l’elemento body<\/code> perch\u00e9 sia un grid container<\/em> e imposta le linee della griglia. Quando rendete un elemento il grid container, tutti i suoi figli diventano grid item<\/em>. (Se avete lavorato con flexbox, allora questo pattern vi sar\u00e0 familiare). Quindi, con quel display: grid<\/code>, ho fatto diventare tutti i div<\/code> figlio dei grid item.<\/p>\n
Poi vengono le righe nella griglia. I valori in grid-template-rows<\/code> definiscono effettivamente le distanze di separazione tra le linee della griglia (lo stesso vale per grid-template-columns<\/code>, che vedremo tra un attimo). Quindi, il valore 192px min-content min-content 1fr;<\/code> significa: \u201cScendi di 192 pixel dal top del grid container e metti una grid line. Poi mettine altre due cos\u00ec che forniscano sufficiente spazio verticale per i contenuti delle righe che definiscono. Infine, lascia una fraction<\/code> (frazione) della distanza tra la terza grid line e il bottom del grid container.\u201d (Fig. 2<\/strong>)<\/p>\n
\"Screenshot<\/p>\n
Fig. 2: Definizione delle righe<\/p>\n<\/div>\n
Il valore min-content<\/code> \u00e8 piuttosto figo. Significa proprio quel che dice: \u201cPrendi la minor quantit\u00e0 di spazio necessario per farci stare i contenuti\u201d. Quindi, per la seconda riga, quella che conterr\u00e0 la barra di navigazione e il campo di ricerca, sar\u00e0 tanto alta quanto la pi\u00f9 alta delle due e non pi\u00f9 alta.<\/p>\n
Lo stesso vale per la terza riga, quella contenente i div<\/code> main ed extra. Sulla homepage, il div<\/code> main sar\u00e0 il pi\u00f9 alto. Nelle sotto-pagine, potrebbe non essere sempre cos\u00ec. In ogni circostanza, la riga contenente quei due div<\/code> sar\u00e0 sempre sufficientemente alta da contenerli entrambe.<\/p>\n
Adesso che abbiamo stabilito le righe, occupiamoci delle colonne. Ho deciso di mantenere le cose semplici e di impostarne solo due. Se guardate la homepage di meyerweb, sembra che abbia tre colonne, ma questo vale solo per i blog post, una parte sostanzialmente minoritaria del sito, e la \u201ccolonna\u201d a sinistra \u00e8 pi\u00f9 una sidebar all’interno della colonna principale.<\/p>\n
Nel design originale, la sidebar (#extra<\/code>) \u00e8 larga 18em, con dello spazio extra per tenerla separata dalla colonna principale, ma la colonna deve anche accomodare la search box, che \u00e8 un po’ pi\u00f9 larga. Dopo un po’ di esperimenti, ho impostato una larghezza di 20em<\/code>. Il resto \u00e8 stato lasciato a flettersi come 1fr<\/code>. (Fig. 3<\/strong>)<\/p>\n
\"Screenshot<\/p>\n
Fig. 3: Definire le colonne<\/p>\n<\/div>\n
Adesso che ho usato due volte l’unit\u00e0 fr<\/code>, sono necessarie due parole di spiegazione. fr<\/code> sta per \u201cfraction\u201d e significa \u201cuna frazione dello spazio libero disponibile\u201d. In questa griglia, ci sono due colonne. Una di queste ha una larghezza esplicita di 20em<\/code>, che pertanto \u00e8 vincolata<\/em>: non c’\u00e8 spazio per la flessibilit\u00e0. Il resto dello spazio della colonna \u00e8 libero<\/em>: man mano che la larghezza del grid container cambia (per esempio, a causa dei cambiamenti della finestra del browser) lo spazio libero cambier\u00e0 per diventare la larghezza del container meno i 20em<\/code> dello spazio vincolato.<\/p>\n
Immaginate per un momento che io abbia deciso di suddividere la griglia in quattro colonne, con quella pi\u00f9 a destra di larghezza pari a 20em<\/code> e il resto con larghezze uguali e flessibili. Avrebbe avuto questo aspetto:<\/p>\n
grid-template-columns: 1fr 1fr 1fr 20em;<\/code><\/p>\n
In alternativa, avrei potuto scriverlo come:<\/p>\n
grid-template-columns: repeat(3, 1fr) 20em;<\/code><\/p>\n
In ogni caso, avrebbe causato la divisione dello spazio libero in maniera equa tra le prime tre colonne. Se il grid container fosse largo 65em<\/code>, l’ultima colonna sarebbe stata larga 20em<\/code> e le altre tre 15em<\/code> ciascuna. (3 x 15 = 45; 45 + 20 = 65.) Rimpicciolendo il grid container alla larghezza di 50em<\/code>, si otterrebbe che le prime tre colonne sarebbero larghe ognuna 10em<\/code>.<\/p>\n
Nel mio caso, volevo che la prima colonna occupasse tutto lo spazio lasciato libero dall’ultima colonna vincolata, quindi ho assegnato 1fr<\/code>. Il risultato finale \u00e8 mostrato nella Fig. 4<\/strong>.<\/p>\n
\"Screenshot<\/p>\n
Fig. 4: La griglia completa<\/p>\n<\/div>\n<\/div>\n
\n
Piazzare gli item<\/h2>\n
Avendo impostato le linee della griglia, adesso si tratta solo di attaccare i grid item alle linee della griglia. Questo pu\u00f2 essere fatto automaticamente, usando l’algoritmo grid-flow, ma questo \u00e8 un caso in cui io voglio sistemare ogni item in un posto specifico. Il che mi conduce a quanto segue:<\/p>\n
\n#sitemast <\/span>{<\/span>\n   grid-row<\/span>:<\/span> 1;<\/span> \n   grid-column<\/span>:<\/span> 1 \/ span 2;<\/span>\n}<\/span>\n\n#search <\/span>{<\/span>\n   grid-row<\/span>:<\/span> 2;<\/span> \n   grid-column<\/span>:<\/span> 2;<\/span>\n}<\/span>\n\n#main <\/span>{<\/span>\n   grid-row<\/span>:<\/span> 3;<\/span> \n   grid-column<\/span>:<\/span> 1;<\/span>\n}<\/span>\n\n#extra <\/span>{<\/span>\n   grid-row<\/span>:<\/span> 3;<\/span> \n   grid-column<\/span>:<\/span> 2;<\/span>\n}<\/span>\n\n#navigate <\/span>{<\/span>\n   grid-row<\/span>:<\/span> 2;<\/span> \n   grid-column<\/span>:<\/span> 1;<\/span>\n}<\/span>\n\n#footer <\/span>{<\/span>\n   grid-row<\/span>:<\/span> 4;<\/span> \n   grid-column<\/span>:<\/span> 1;<\/span>\n}<\/span>\n<\/code>\n<\/pre>\n
Per ognuno dei sei div<\/code>, ho semplicemente detto: \u201cFissa il tuo angolo superiore a questa row line e il tuo lato sinistro a questa column line\u201d. Ho usato i numeri di linea perch\u00e9 questo \u00e8 tutto quello che mi sono dato: \u00e8 possibile assegnare dei nomi alle grid line, ma io non l’ho fatto. (Ma rimanete sintonizzati per un esempio su questo pi\u00f9 in l\u00e0 nell’articolo!).<\/p>\n
Quindi, per scegliere un esempio, ho impostato la porzione #main<\/code> perch\u00e9 iniziasse sulla terza row line e sulla prima column line. Questo significa che, di default, riempir\u00e0 lo spazio dalla prima column line alla seconda e dalla terza row line alla quarta.<\/p>\n
Quasi tutti i div<\/code> sono stati impostati in questo modo. L’eccezione in questo caso \u00e8 #sitemast<\/code>. Comincia alle prime column line e row line, ma dal momento che volevo che attraversasse tutta la griglia, ho impostato il suo valore della colonna a 1 \/ span 2<\/code>, che significa: \u201cComincia alla column line 1 e occupa due colonne\u201d. Avrei potuto ottenere lo stesso risultato con il valore 1 \/ 3<\/code>, che significa: \u201cVai dalla column line 1 alla column line 3\u201d. (Fig. 5<\/strong>)<\/p>\n
\"Screenshot<\/p>\n
Fig. 5: Il posizionamento dei grid item<\/p>\n<\/div>\n
Ma dovete capire che quello \u00e8 solo un diagramma, non la reale situazione di layout. Non ancora, perlomeno. Quello che voglio che sia chiaro qui \u00e8 che mentre potete<\/em> esplicitamente assegnare tutti i vostri grid item a specifiche righe e colonne, non dovete<\/em> farlo. Grid ha un flow model che permette ai grid item di essere automaticamente assegnati alla successiva cella aperta della griglia, a seconda della direzione del flusso. Nel mio caso, avrei potuto cavarmela letteralmente solo con queste regole:<\/p>\n
\n#sitemast <\/span>{<\/span>\n   grid-column<\/span>:<\/span> 1 \/ span 2;<\/span>\n}<\/span>\n\n#navigate <\/span>{<\/span>\n   grid-row<\/span>:<\/span> 2;<\/span> \n   grid-column<\/span>:<\/span> 1;<\/span>\n}<\/span>\n<\/code>\n<\/pre>\n
Questo avrebbe assicurato che la testata fosse larga due colonne e che il div<\/code> della navigazione fosse posizionato nell’esatta cella della griglia che volevo. Questo avrebbe lasciato la prima cella della seconda riga riempita dalla navigazione e il resto delle celle della griglia aperte.<\/p>\n
Detto ci\u00f2, gli item non assegnati sarebbero fluiti nella griglia nell’ordine del sorgente. La testata (#sitemast<\/code>) sarebbe stata piazzata nella prima riga a due colonne che avrebbe trovato, che poi \u00e8 la prima riga. Il div<\/code> di ricerca sarebbe ricaduto nella cella aperta seguente, che \u00e8 riga 2-colonna 2, perch\u00e9 riga 2-colonna 1 \u00e8 gi\u00e0 occupata dal div<\/code> di navigazione. Dopo di che, il div<\/code> principale sarebbe finito nella prima cella aperta: riga 3-colonna 1. Extra sarebbe andato nella cella seguente: riga 3-colonna 2. E poi il footer si sarebbe messo nella riga 4-colonna 1.<\/p>\n
Il risultato finale sarebbe esattamente quello mostrato nella Fig. 5<\/strong>. La differenza sarebbe che se avessi una pagina speciale in cui fosse aggiunto un altro div<\/code>, avrebbe devastato l’intero layout, a seconda della sua posizione nel HTML. Assegnando esplicitamente i miei pezzi di layout nei posti in cui li voglio, impedisco che un elemento vagante distrugga tutto.<\/p>\n
Dati gli stili che ho scritto, se un elemento figlio del body<\/code> venisse<\/em> aggiunto alla pagina, diventer\u00e0 un grid item. Se non gli d\u00f2 una posizione esplicita nella griglia, finir\u00e0 nella prima cella disponibile della griglia. Dal momento che la cella pi\u00f9 in basso a destra (riga 4-colonna 2) non \u00e8 occupata, l\u00ec \u00e8 dove verrebbe posizionato l’elemento\u2026 Assumendo che non sia impostato per occupare due colonne. In quel caso, finirebbe nel fondo della griglia, in una quinta riga creata automaticamente.<\/p>\n<\/div>\n
\n
Accomodare il passato<\/h2>\n
\u00c8 abbastanza facile impostare una griglia, ma quando gli si mettono dentro dei grid item, questi si tirano dietro tutti i loro stili gi\u00e0 in essere. In alcuni casi, questo potrebbe non essere un gran problema, ma nel mio, ha significato che tutti i margin e i padding che avevo usato per tenere separati i vari pezzi del layout gli uni dagli altri adesso si confondevano con il posizionamento dei grid item. Potete vedere questa cosa nella Fig. 6<\/strong>, creata usando una copia locale del sito.<\/p>\n
\"Screenshot<\/p>\n
Fig. 6: Grid + legacy = no<\/p>\n<\/div>\n
Ahia. Era giunto il momento di sovrascrivere i pezzi degli stili di layout legacy di cui non avevo bisogno in Grid, ma che dovevo tenere per i browser che non supportano ancora Grid.<\/p>\n
Quindi ho incapsulato tutto in un blocco @supports<\/code>. Dal momento che volevo vincolare il grid layout ai display pi\u00f9 grandi, ho messo il blocco @media<\/code> proprio all’interno di @supports<\/code> per poi procedere ad azzerare o altrimenti a cambiare i vari margin e padding di cui non avevo bisogno nel contesto Grid. Ecco in che modo \u00e8 uscito:<\/p>\n
\n@supports (display: grid) <\/span>{<\/span>\n   @media (min-width: 60.001em) <\/span>{<\/span>\n      body <\/span>{<\/span>\n         display<\/span>:<\/span> grid;<\/span>\n         grid-template-rows<\/span>:<\/span> 192px min-content min-content 1fr;<\/span>\n         grid-template-columns<\/span>:<\/span> 1fr 20em;<\/span>\n      }<\/span>\n\n      #sitemast <\/span>{<\/span>\n         grid-row<\/span>:<\/span> 1;<\/span> \n         grid-column<\/span>:<\/span> 1 \/ span 2;<\/span>\n      }<\/span>\n\n      #search <\/span>{<\/span>\n         grid-row<\/span>:<\/span> 2;<\/span> \n         grid-column<\/span>:<\/span> 2;<\/span>\n         position<\/span>:<\/span> static;<\/span> \n         padding<\/span>:<\/span> 0.25em 0 1em;<\/span>\n      }<\/span>\n\n      #main <\/span>{<\/span>\n         grid-row<\/span>:<\/span> 3;<\/span> \n         grid-column<\/span>:<\/span> 1;<\/span>\n         margin-right<\/span>:<\/span> 0;<\/span> \n         margin-top<\/span>:<\/span> 1.25em;<\/span>\n         padding-top<\/span>:<\/span> 0;<\/span>\n      }<\/span>\n   \n      .hpg #main <\/span>{<\/span>\n         margin-top<\/span>:<\/span> 0;<\/span> \n         padding-top<\/span>:<\/span> 0;<\/span>\n      }<\/span>\n\n      #extra <\/span>{<\/span>\n         grid-row<\/span>:<\/span> 3;<\/span> \n         grid-column<\/span>:<\/span> 2;<\/span>\n         position<\/span>:<\/span> static;<\/span> \n         top<\/span>:<\/span> 0;<\/span>\n         margin-top<\/span>:<\/span> 0;<\/span>\n         padding-top<\/span>:<\/span> 0.5em;<\/span> \n         margin-left<\/span>:<\/span> auto;<\/span>\n      }<\/span>\n\n      #navigate <\/span>{<\/span>\n         grid-row<\/span>:<\/span> 2;<\/span> \n         grid-column<\/span>:<\/span> 1;<\/span>\n         position<\/span>:<\/span> static;<\/span> \n         margin-top<\/span>:<\/span> 1px;<\/span> \n         padding-bottom<\/span>:<\/span> 0;<\/span>\n      }<\/span>\n\n      #footer <\/span>{<\/span>\n         grid-row<\/span>:<\/span> 4;<\/span> \n         grid-column<\/span>:<\/span> 1;<\/span>\n         margin-right<\/span>:<\/span> 0;<\/span>\n      }<\/span>\n   }<\/span>\n}<\/span><\/code>\n<\/pre>\n
Potrei probabilmente fare il refactor di questo codice per renderlo pi\u00f9 efficiente, ma per ora lo lascer\u00f2 cos\u00ec com’\u00e8. Rende chiaro quello che si \u00e8 dovuto fare per ogni grid item, dove \u00e8 stato necessario sovrascrivere le position<\/code> cos\u00ec che la loro posizione assoluta non interagisse in maniera strana con la griglia, quali margin e padding hanno dovuto essere cambiati e cos\u00ec via. Diamo un’occhiata al risultato finale (Fig. 7<\/strong>).<\/p>\n
\"Screenshot<\/p>\n
Fig. 7: Grid + @supports = evviva!<\/p>\n<\/div>\n
Vi perdoner\u00f2 se avete pensato che questo \u00e8 stato tanto rumore per quasi nulla. Perch\u00e9 fare tutta questa fatica solo per farlo apparire identico? La cosa davvero potente qui, in quello che \u00e8, lo ammetto, un semplice esempio, \u00e8 il modo in cui non devo pi\u00f9 preoccuparmi delle sovrapposizioni. Il footer sar\u00e0 sempre sotto ai div<\/code> main ed extra, non importa quale \u00e8 pi\u00f9 alto. Quando usavo il posizionamento, questa cosa non era mai garantita.<\/p>\n
In maniera simile, la navigazione e la ricerca manterranno sempre un’altezza condivisa, assicurando che nessuna delle due si sovrapporr\u00e0 mai al contenuto sottostante e, grazie a min-content<\/code> non devo pi\u00f9 indovinare quanto diventeranno alte. Semplicemente, Grid gestisce tutto questo al mio posto.<\/p>\n
E ricordate, il layout funziona ancora nei vecchi browser come ha sempre fatto, usando il posizionamento. Non ho \u201crotto\u201d il sito per i browser che non comprendono Grid. Il pi\u00f9 potente Grid layout \u00e8 qui, aspettiamo che Chrome e Firefox lo capiscano.<\/p>\n
Se volete vedere live tutto questo, andate su meyerweb.com<\/a> e ispezionate gli elementi in Firefox 52 o superiori. L\u00ec vedrete una piccola icona a forma di waffle di fianco alla dichiarazione display: grid<\/code> sull’elemento body<\/code>. Cliccatela e Firefox disegner\u00e0 le grid line sulla pagina cos\u00ec che possiate analizzarle. (Potete anche abilitare un tool di layout pi\u00f9 potente nelle Nightly build di Firefox. Si veda il mio post \u201cGrid Inspection<\/a>\u201d per ulteriori dettagli).<\/p>\n<\/div>\n
\n
Convenzioni di naming<\/h2>\n
Ho citato prima che \u00e8 possibile dare un nome alle grid line. Io non l’ho fatto per i miei stili perch\u00e9 la griglia che ho definito era davvero semplice, ma per griglie pi\u00f9 complicate pu\u00f2 essere utile dare un nome alle linee.<\/p>\n
Usando la versione stripped-down degli stili, quella senza tutte le sovrascritture legacy, si fa pressapoco cos\u00ec per dare un nome alle grid line:<\/p>\n
\nbody <\/span>{<\/span>\n   display<\/span>:<\/span> grid;<\/span>\n   grid-template-rows<\/span>:<\/span> [masthead] 192px [navsearch] min-content [mainextra] min-content [footer] 1fr;<\/span>\n   grid-template-columns<\/span>:<\/span> [left] 1fr [middle] 20em [right];<\/span>\n}<\/span>\n<\/code>\n<\/pre>\n
Ciascuna delle parole nelle parentesi quadre \u00e8 assegnata come nome alla corrispondente grid line. (Fig. 8<\/strong>)<\/p>\n
\"Screenshot<\/p>\n
Fig. 8: Grid line con i nomi<\/p>\n<\/div>\n
Una volta definiti questi nomi, potete far riferimento a loro nelle vostre propriet\u00e0 grid-row<\/code> e grid-column<\/code>. Per esempio:<\/p>\n
\n#sitemast <\/span>{<\/span>\n   grid-row<\/span>:<\/span> masthead;<\/span> \n   grid-column<\/span>:<\/span> left \/ span right;<\/span>\n}<\/span>\n\n#search <\/span>{<\/span>\n   grid-row<\/span>:<\/span> navsearch;<\/span> \n   grid-column<\/span>:<\/span> middle;<\/span>\n}<\/span>\n\n#main <\/span>{<\/span>\n   grid-row<\/span>:<\/span> mainextra;<\/span> \n   grid-column<\/span>:<\/span> left;<\/span>\n}<\/span>\n\n#extra  <\/span>{<\/span>\n   grid-row<\/span>:<\/span> mainextra;<\/span> \n   grid-column<\/span>:<\/span> middle;<\/span>\n}<\/span>\n\n#navigate <\/span>{<\/span>\n   grid-row<\/span>:<\/span> navsearch;<\/span> \n   grid-column<\/span>:<\/span> left;<\/span>\n}<\/span>\n\n#footer <\/span>{<\/span>\n   grid-row<\/span>:<\/span> footer;<\/span> \n   grid-column<\/span>:<\/span> left;<\/span>\n}<\/span>\n<\/code>\n<\/pre>\n
In maniera simile ai nomi delle class, potete assegnare pi\u00f9 nomi a una grid line fornendo un elenco separato da spazi. Provate questo per esempio:<\/p>\n
grid-template-columns: [start left] 1fr [middle sidebar] 20em [right end];<\/code><\/p>\n
Potete poi far riferimento a uno qualsiasi di quei nomi nella vostra dichiarazione grid-column<\/code>. Non c’\u00e8 un limite definito sul numero di nomi, ma ricordate che a grandi poteri corrispondono\u2026<\/p>\n
Nel caso ve lo steste chiedendo, potete mischiare nomi e numeri per i grid line, quindi qualcosa come grid-row: navsearch; grid-column: 2;}<\/code> va totalmente bene. Potete usare un qualsiasi nome di cui il browser possa fare il parsing, il che significa che potete specificare pi\u00f9 o meno qualunque cosa Unicode e il character encoding del vostro file CSS permettono.<\/p>\n<\/div>\n
\n
Grid e Flexbox<\/h2>\n
Una domanda che potreste farvi \u00e8 la seguente: adesso che abbiamo Grid, butto via Flexbox<\/em>? Assolutamente no! I due possono lavorare insieme ed effettivamente lo fanno bene.<\/p>\n
Prendiamo in considerazione la barra di navigazione del mio design. Per anni, \u00e8 stata visualizzata usando una lista non ordinata e float: left<\/code> per i list item. Semplificando un po’, il CSS e il markup sono cos\u00ec:<\/p>\n
\n#navlinks <\/span>{<\/span>\n  float<\/span>:<\/span> left;<\/span> \n  width<\/span>:<\/span> 100%;<\/span>\n}<\/span>\n\n#navlinks li <\/span>{<\/span>\n  float<\/span>:<\/span> left;<\/span> \n  list-style<\/span>:<\/span> none;<\/span> \n  margin-left<\/span>:<\/span> 1px;<\/span>\n}<\/span>\n<\/code>\n<\/pre>\n
\n<<\/span>div<\/span> id<\/span>=<\/span>\"<\/span>navigate\"<\/span><\/span>><\/span><\/span>\n   <<\/span>ul<\/span> id<\/span>=<\/span>\"<\/span>navlinks\"<\/span><\/span>><\/span><\/span>\n     <<\/span>li<\/span>><\/span><\/span><<\/span>a<\/span> href<\/span>=<\/span>\"<\/span>\u2026\"<\/span><\/span>><\/span><\/span>Archives<\/<\/span>a<\/span>><\/span><\/span><\/<\/span>li<\/span>><\/span><\/span>\n     <<\/span>li<\/span>><\/span><\/span><<\/span>a<\/span> href<\/span>=<\/span>\"<\/span>\u2026\"<\/span><\/span>><\/span><\/span>CSS<\/<\/span>a<\/span>><\/span><\/span><\/<\/span>li<\/span>><\/span><\/span>\n     <<\/span>li<\/span>><\/span><\/span><<\/span>a<\/span> href<\/span>=<\/span>\"<\/span>\u2026\"<\/span><\/span>><\/span><\/span>Toolbox<\/<\/span>a<\/span>><\/span><\/span><\/<\/span>li<\/span>><\/span><\/span>\n     <<\/span>li<\/span>><\/span><\/span><<\/span>a<\/span> href<\/span>=<\/span>\"<\/span>\u2026\"<\/span><\/span>><\/span><\/span>Writing<\/<\/span>a<\/span>><\/span><\/span><\/<\/span>li<\/span>><\/span><\/span>\n     <<\/span>li<\/span>><\/span><\/span>><<\/span>a<\/span> href<\/span>=<\/span>\"<\/span>\u2026\"<\/span><\/span>><\/span><\/span>Speaking<\/<\/span>a<\/span>><\/span><\/span><\/<\/span>li<\/span>><\/span><\/span>\n     <<\/span>li<\/span>><\/span><\/span>>><<\/span>a<\/span> href<\/span>=<\/span>\"<\/span>\u2026\"<\/span><\/span>><\/span><\/span>Leftovers<\/<\/span>a<\/span>><\/span><\/span><\/<\/span>li<\/span>><\/span><\/span>\n   <\/<\/span>ul<\/span>><\/span><\/span>\n<\/<\/span>div<\/span>><\/span><\/span>\n<\/code>\n<\/pre>\n
Perch\u00e9 non display: inline-block<\/code> invece di float: left<\/code>? Perch\u00e9, letteralmente, quella non era un’opzione quando ho scritto il CSS per i navlinks e non mi sono mai deciso ad aggiornarlo. (Probabilmente riuscite a vedere un tema ricorrente qui.)<\/p>\n
Adesso ho due opzioni molto migliori per sistemare quei link: Grid e Flexbox. Potrei definire una griglia qui, che potrebbe essere qualcosa cos\u00ec:<\/p>\n
\n#navlinks <\/span>{<\/span>\n  display<\/span>:<\/span> grid;<\/span>\n  grid-template-columns<\/span>:<\/span> repeat(6,min-content);<\/span>\n}<\/span>\n\n#navlinks li <\/span>{<\/span>\n  list-style<\/span>:<\/span> none;<\/span> \n  margin-left<\/span>:<\/span> 1px;<\/span>\n}<\/span>\n<\/code>\n<\/pre>\n
Questo mi farebbe ottenere sostanzialmente lo stesso risultato ma in una griglia, il che \u00e8 molto pi\u00f9 robusto di qualunque float o inline block.<\/p>\n
D’altro canto, dovrei usare Grid, che \u00e8 un layout system bidimensionale, per un pezzo di layout unidimensionale. \u00c8 sicuramente possibile farlo ma sembra un po’ forzato e non \u00e8 effettivamente quello per cui Grid \u00e8 stato pensato. Tuttavia, Flexbox \u00e8 progettato esattamente per questo tipo di situazioni.<\/p>\n
Quindi, al suo posto potrei scrivere quanto segue:<\/p>\n
\n#navlinks <\/span>{<\/span>\n  display<\/span>:<\/span> flex;<\/span> \n  justify-content<\/span>:<\/span> flex-start;<\/span> \n  flex-wrap<\/span>:<\/span> wrap;<\/span>\n}<\/span>\n\n#navlinks li <\/span>{<\/span>\n  list-style<\/span>:<\/span> none;<\/span> \n  margin-left<\/span>:<\/span> 1px;<\/span>\n}<\/span>\n<\/code>\n<\/pre>\n
Di nuovo, otterrei praticamente lo stesso risultato ma in maniera molto pi\u00f9 robusta. Oltre a tenere i link tutti allineati, il valore wrap<\/code> permette ai link di andare su una seconda riga se \u00e8 necessario. E dal momento che flexbox \u00e8 all’interno di un grid item che fa parte di una grid row la cui altezza \u00e8 min-content<\/code>, qualunque aumento in altezza (dovuto a un line wrap o ad altro) causer\u00e0 l’aumento dell’altezza dell’intera riga. Questo significa che le righe dopo di essa si sposteranno in gi\u00f9 per accomodarla.<\/p>\n
E adesso che riguardo il markup, ho realizzato che potrei semplificarlo senza bisogno di toccare alcuno stile della griglia. Invece di incapsulare una lista con un div<\/code>, posso eliminare il div<\/code> e riassegnare i suoi ID alla lista. Quindi il markup diventa:<\/p>\n
\n<<\/span>ul<\/span> id<\/span>=<\/span>\"<\/span>navigate\"<\/span><\/span>><\/span><\/span>\n  <<\/span>li<\/span>><\/span><\/span><<\/span>a<\/span> href<\/span>=<\/span>\"<\/span>\u2026\"<\/span><\/span>><\/span><\/span>Archives<\/<\/span>a<\/span>><\/span><\/span><\/<\/span>li<\/span>><\/span><\/span>\n  <<\/span>li<\/span>><\/span><\/span><<\/span>a<\/span> href<\/span>=<\/span>\"<\/span>\u2026\"<\/span><\/span>><\/span><\/span>CSS<\/<\/span>a<\/span>><\/span><\/span><\/<\/span>li<\/span>><\/span><\/span>\n  <<\/span>li<\/span>><\/span><\/span><<\/span>a<\/span> href<\/span>=<\/span>\"<\/span>\u2026\"<\/span><\/span>><\/span><\/span>Toolbox<\/<\/span>a<\/span>><\/span><\/span><\/<\/span>li<\/span>><\/span><\/span>\n  <<\/span>li<\/span>><\/span><\/span><<\/span>a<\/span> href<\/span>=<\/span>\"<\/span>\u2026\"<\/span><\/span>><\/span><\/span>Writing<\/<\/span>a<\/span>><\/span><\/span><\/<\/span>li<\/span>><\/span><\/span>\n  <<\/span>li<\/span>><\/span><\/span><<\/span>a<\/span> href<\/span>=<\/span>\"<\/span>\u2026\"<\/span><\/span>><\/span><\/span>Speaking<\/<\/span>a<\/span>><\/span><\/span><\/<\/span>li<\/span>><\/span><\/span>\n  <<\/span>li<\/span>><\/span><\/span><<\/span>a<\/span> href<\/span>=<\/span>\"<\/span>\u2026\"<\/span><\/span>><\/span><\/span>Leftovers<\/<\/span>a<\/span>><\/span><\/span><\/<\/span>li<\/span>><\/span><\/span>\n<\/<\/span>ul<\/span>><\/span><\/span>\n<\/code>\n<\/pre>\n
Dopo aver sistemato i selettori nel mio CSS, passando da #navlinks<\/code> a #navigate<\/code>, il layout risultante sar\u00e0 esattamente com’era prima. L’ul<\/code> diventer\u00e0 un grid item e un flex container. Questa \u00e8 una cosa che potete fare.<\/p>\n
Nel mio caso, lo svantaggio potrebbe essere la gestione delle interazioni tra quel cambiamento e il mio layout legacy, ma non \u00e8 una questione enorme da risolve, si tratta solo di farlo.<\/p>\n<\/div>\n
\n
Delusioni<\/h2>\n
Allora, quali sono gli svantaggi? Non ce ne sono molti, ma esistono.<\/p>\n
Principalmente, non c’\u00e8 un modo per definire una griglia generale per la pagina a cui tutti gli elementi possano far riferimento. In altre parole, se dicessi:<\/p>\n
\nbody <\/span>{<\/span>\n display<\/span>:<\/span> grid;<\/span>\n grid-template-columns<\/span>:<\/span> repeat(16, 1fr);<\/span>\n}<\/span>\n<\/code>\n<\/pre>\n
\u2026questo imposterebbe una griglia flessibile di 16 colonne solo per l’elemento body<\/code> e i suoi elementi figlio sarebbero i soli a poter diventare grid item. Non posso scendere nell’albero del documento e assegnare elementi da sistemare su quella griglia body<\/code>. Questa \u00e8 la ragione principale per cui non ho messo i piccoli pezzi della sidebar nel mio blog post in una griglia condivisa: a questo punto non posso letteralmente, a meno che non crei un CSS o un HTML bruttissimi.<\/p>\n
La possibilit\u00e0 di fare queste cose \u00e8 nota come subgrid<\/em> e non \u00e8 ancora stata implementata in nessun browser. Ci sono questioni da chiarire su come dovr\u00e0 o non dovr\u00e0 funzionare esattamente, quindi c’\u00e8 ancora moltissima speranza che tutto si sistemi alla fine. \u00c8 una delusione che non la si abbia ancora e questa mancanza restringe l’intero range dei poteri di grid, ma speriamo che sia solo per un breve periodo.<\/p>\n
Nel frattempo, sono sicuro che la gente se ne uscir\u00e0 con dei modi per aggirare questa limitazione. Un workaround basico in questo caso: potrei definire una griglia che si applica individualmente ad ogni blog post e che sistema i pezzi di ogni post su quelle griglie annidate. Il CSS apparirebbe pi\u00f9 o meno cos\u00ec:<\/p>\n
\ndiv.post <\/span>{<\/span>\n  display<\/span>:<\/span> grid;<\/span>\n  grid-template-columns<\/span>:<\/span> [meta] 10em [main] 1fr;<\/span>\n  grid-template-rows<\/span>:<\/span> [title] min-content [main] 1fr;<\/span>\n}<\/span>\n<\/code>\n<\/pre>\n
Con ci\u00f2, potrei sistemare i metadati, il titolo e il testo del corpo nelle celle definite della griglia, usando o i numeri di grid line o i grid name che ho impostato. Qualcosa del genere:<\/p>\n
\ndiv.post h3 <\/span>{<\/span>\n  grid-column<\/span>:<\/span> 2;<\/span> \n  grid-row<\/span>:<\/span> title;<\/span>\n}<\/span>\n\nul.meta <\/span>{<\/span>\n  grid-column<\/span>:<\/span> meta;<\/span> \n  grid-row<\/span>:<\/span> main;<\/span>\n}<\/span>\n\ndiv.post div.text <\/span>{<\/span>\n  grid-column<\/span>:<\/span> main;<\/span> \n  grid-row<\/span>:<\/span> main;<\/span>\n}<\/span>\n<\/code>\n<\/pre>\n
Lo svantaggio \u00e8 che i metadati sono poi vincolati ad essere di una specifica larghezza invece di essere io in grado di impostare una colonna che sia condivisa da tutti i metadati e darle la dimensione del pezzo pi\u00f9 lungo di contenuto. Non \u00e8 peggio di adesso, in cui imposto i metadati con float ad una esplicita larghezza, cos\u00ec da non perdermi niente. \u00c8 semplicemente una piccola opportunit\u00e0 mancata (temporaneamente) per guadagnare qualcosa.<\/p>\n
Un’altra limitazione, una che non si sa se verr\u00e0 gestita, \u00e8 che non potete assegnare direttamente degli stili alle celle della griglia. Supponiamo che volessi mettere un box attorno alla sidebar #extra<\/code>, che riempia completamente quella cella. Dovrei assegnare uno stile al div<\/code>. Non posso fare qualcosa come:<\/p>\n
\n@grid-cell(2, 3) <\/span>{<\/span>\n  background<\/span>:<\/span> teal;<\/span> \n  border<\/span>:<\/span> 1px solid;<\/span>\n}<\/span>\n<\/code>\n<\/pre>\n
Voglio dire, non sono nemmeno sicuro che la sintassi sarebbe simile a questa (probabilmente no) e solo adesso si sta cominciando a discutere questa possibilit\u00e0 all’interno del Working Group. Se avete degli use case per questo tipo di capacit\u00e0, condivideteli sicuramente con il mondo e con le persone di www-style<\/a>. Pi\u00f9 abbiamo dei casi dal mondo reale pi\u00f9 avremo motivi per supportarlo.<\/p>\n
Inevitabilmente ci saranno dei bug da sistemare. Per esempio, mentre finivo questo articolo, ho scoperto che in alcune situazioni, Chrome 57 pu\u00f2 soffrire di un page-blanking bug<\/a> quando si usa Grid. Sembra sia causato dall’avere degli elementi con position absolute rimossi dalla pagina Grid e pu\u00f2 essere scatenato da estensioni come Window Resizer e LastPass. La buona notizia \u00e8 che una fix \u00e8 stata accettata per Chrome 58, quindi dovrebbe essere sistemata al pi\u00f9 tardi per la fine di Aprile 2017.<\/p>\n<\/div>\n
\n
Grid power<\/h2>\n
Spero che questa esplorazione dell’applicazione di Grid a un sito live vi abbia fornito un assaggio di quello che si pu\u00f2 fare. Tuttavia, voglio avvertirvi che questo \u00e8 giusto un assaggio, anzi, un assaggino. Ho solo grattato la superficie di quello che la sintassi di Grid rende possible, quindi se questo vi ha solleticato l’immaginazione, vi raccomando caldamente di sperimentare e poi di buttarvi nella specifica di Grid, per vedere cosa altro \u00e8 possibile. (Grid gap! Grid molto dense! Griglie inline! Righe e colonne auto-filling!).<\/p>\n
Ma ancora di pi\u00f9, quello che ho esplorato qui \u00e8 una parte infinitesima di quello che Grid render\u00e0 possibile. Ovvio, pu\u00f2 rendere i nostri design esistenti pi\u00f9 flessibili, robusti e semplici da mantenere. E questo \u00e8 fantastico, ma rende anche possibili dei layout che non ci saremmo mai sognati, perch\u00e9 erano impossibili dati gli strumenti a nostra disposizione. Ci sono nuove tecniche, perfino nuovi movimenti artistici che aspettano di essere scoperti. Non abbiamo visto un cambiamento di fase cos\u00ec profondo dallo spostamento originale da tabelle a CSS. Spero che farete parte di quelli che esploreranno questo nuovo regno.<\/p>\n<\/div>\n
\n
Risorse<\/h2>\n
Come ho detto, questa \u00e8, nella migliore delle ipotesi, un’introduzione. Volete saperne di pi\u00f9? Ecco alcune ottime risorse per cominciare:<\/p>\n