Comprendere e usare CSS Grid è più semplice di quel che pensate. Il giorno in cui il supporto per Grid è apparso in Firefox 52, ho deciso così su due piedi di convertire il layout di base del mio sito personale utilizzando Grid ed è stato un processo piuttosto semplice: cinque minuti per scrivere gli stili della griglia seguiti da 15-20 minuti per la risoluzione dei problemi.
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 è molto molto più di quello che potessimo sognare con le tabelle. Significa più layout responsive, documenti molto più accessibili e un markup molto più pulito di quello che ci siamo mai potuti permettere con i float e il posizionamento.
Sono passati decenni da quando CSS è apparso per la prima volta, ma non ha mai avuto un sistema come questo. E Grid è giù 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 una nuova era nel digital design.
Come funzionavano le cose#section1
Prima di arrivare a Grid, permettetemi un momento per spiegare la struttura del markup delle pagine principali di meyerweb e l’approccio “positioning-and-margin” che ho usato per circa 12 anni. Ecco come è strutturato il markup:
<body>
<div id="sitemast">…</div>
<div id="search">…</div>
<div id="main">…</div>
<div id="extra">…</div>
<div id="navigate">…</div>
<div id="footer">…</div>
</body>
Alcuni di questi ID sono superstiti idiosincratici della mia visione delle convenzioni di layout e naming dei primi anni 2000. Per esempio, #extra è quello che la maggior parte di noi chiamerebbe #sidebar. #sitemast sta per #masthead. E #footer proviene da un’epoca antecedente all’arrivo dell’effettivo elemento <footer>.
I div (che probabilmente oggi sarebbero section, 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à 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.
Tutti questi sono stati tenuti insieme in un layout con il posizionamento assoluto dei div di navigazione e ricerca. Il sitemast è stato impostato ad un’altezza di 192px e a entrambe i div di navigazione e ricerca è stato dato top: 192px; per mostrarli proprio sotto a questo. Per lasciare margine a questi, sono stati applicati dei top margin ai div main ed extra. (Fig. 1)
Fig. 1: Homepage di meyerweb (tagliata)
Costruire la griglia#section2
Quindi, questo è il modo in cui le cose sono state disposte fin dalla metà del 2005, più o meno. A un certo punto ho giochicchiato con flexbox come esperimento, ma non l’ho mai pubblicato perché 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ù tornato su.
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, è arrivato al pubblico in Firefox 52. Ho twittato e postato un articolo e una demo che avevo messo insieme la sera prima e mi sono seduto meravigliandomi che quel giorno fosse finalmente arrivato. Dopo più di venti anni di CSS, finalmente, un sistema di layout reale, un insieme di proprietà e valori progettati fin dal principio per quello scopo.
E poi ho deciso, più o meno in quell’istante, di convertire il mio sito personale perché utilizzasse Grid per il suo layout di livello principale. Mi ci sono voluti meno di cinque minuti per uscirmene con quello che segue:
body {
display: grid;
grid-template-rows: 192px min-content min-content 1fr;
grid-template-columns: 1fr 20em;
}
#sitemast {
grid-row: 1;
grid-column: 1 / span 2;
}
#search {
grid-row: 2;
grid-column: 2;
}
#main {
grid-row: 3;
grid-column: 1;
}
#extra {
grid-row: 3;
grid-column: 2;
}
#navigate {
grid-row: 2;
grid-column: 1;
}
#footer {
grid-row: 4;
grid-column: 1;
}
Questo non è tutto quello che dovevo fare, ma è la parte centrale. Lasciate che ve la spieghi.
body {
display: grid;
grid-template-rows: 192px min-content min-content 1fr;
grid-template-columns: 1fr 20em;
}
Questa parte del CSS imposta l’elemento body perché sia un grid container e imposta le linee della griglia. Quando rendete un elemento il grid container, tutti i suoi figli diventano grid item. (Se avete lavorato con flexbox, allora questo pattern vi sarà familiare). Quindi, con quel display: grid, ho fatto diventare tutti i div figlio dei grid item.
Poi vengono le righe nella griglia. I valori in grid-template-rows definiscono effettivamente le distanze di separazione tra le linee della griglia (lo stesso vale per grid-template-columns, che vedremo tra un attimo). Quindi, il valore 192px min-content min-content 1fr; significa: “Scendi di 192 pixel dal top del grid container e metti una grid line. Poi mettine altre due così che forniscano sufficiente spazio verticale per i contenuti delle righe che definiscono. Infine, lascia una fraction (frazione) della distanza tra la terza grid line e il bottom del grid container.” (Fig. 2)
Fig. 2: Definizione delle righe
Il valore min-content è piuttosto figo. Significa proprio quel che dice: “Prendi la minor quantità di spazio necessario per farci stare i contenuti”. Quindi, per la seconda riga, quella che conterrà la barra di navigazione e il campo di ricerca, sarà tanto alta quanto la più alta delle due e non più alta.
Lo stesso vale per la terza riga, quella contenente i div main ed extra. Sulla homepage, il div main sarà il più alto. Nelle sotto-pagine, potrebbe non essere sempre così. In ogni circostanza, la riga contenente quei due div sarà sempre sufficientemente alta da contenerli entrambe.
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 “colonna” a sinistra è più una sidebar all’interno della colonna principale.
Nel design originale, la sidebar (#extra) è larga 18em, con dello spazio extra per tenerla separata dalla colonna principale, ma la colonna deve anche accomodare la search box, che è un po’ più larga. Dopo un po’ di esperimenti, ho impostato una larghezza di 20em. Il resto è stato lasciato a flettersi come 1fr. (Fig. 3)
Fig. 3: Definire le colonne
Adesso che ho usato due volte l’unità fr, sono necessarie due parole di spiegazione. fr sta per “fraction” e significa “una frazione dello spazio libero disponibile”. In questa griglia, ci sono due colonne. Una di queste ha una larghezza esplicita di 20em, che pertanto è vincolata: non c’è spazio per la flessibilità. Il resto dello spazio della colonna è libero: man mano che la larghezza del grid container cambia (per esempio, a causa dei cambiamenti della finestra del browser) lo spazio libero cambierà per diventare la larghezza del container meno i 20em dello spazio vincolato.
Immaginate per un momento che io abbia deciso di suddividere la griglia in quattro colonne, con quella più a destra di larghezza pari a 20em e il resto con larghezze uguali e flessibili. Avrebbe avuto questo aspetto:
grid-template-columns: 1fr 1fr 1fr 20em;
In alternativa, avrei potuto scriverlo come:
grid-template-columns: repeat(3, 1fr) 20em;
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, l’ultima colonna sarebbe stata larga 20em e le altre tre 15em ciascuna. (3 x 15 = 45; 45 + 20 = 65.) Rimpicciolendo il grid container alla larghezza di 50em, si otterrebbe che le prime tre colonne sarebbero larghe ognuna 10em.
Nel mio caso, volevo che la prima colonna occupasse tutto lo spazio lasciato libero dall’ultima colonna vincolata, quindi ho assegnato 1fr. Il risultato finale è mostrato nella Fig. 4.
Fig. 4: La griglia completa
Piazzare gli item#section3
Avendo impostato le linee della griglia, adesso si tratta solo di attaccare i grid item alle linee della griglia. Questo può essere fatto automaticamente, usando l’algoritmo grid-flow, ma questo è un caso in cui io voglio sistemare ogni item in un posto specifico. Il che mi conduce a quanto segue:
#sitemast {
grid-row: 1;
grid-column: 1 / span 2;
}
#search {
grid-row: 2;
grid-column: 2;
}
#main {
grid-row: 3;
grid-column: 1;
}
#extra {
grid-row: 3;
grid-column: 2;
}
#navigate {
grid-row: 2;
grid-column: 1;
}
#footer {
grid-row: 4;
grid-column: 1;
}
Per ognuno dei sei div, ho semplicemente detto: “Fissa il tuo angolo superiore a questa row line e il tuo lato sinistro a questa column line”. Ho usato i numeri di linea perché questo è tutto quello che mi sono dato: è possibile assegnare dei nomi alle grid line, ma io non l’ho fatto. (Ma rimanete sintonizzati per un esempio su questo più in là nell’articolo!).
Quindi, per scegliere un esempio, ho impostato la porzione #main perché iniziasse sulla terza row line e sulla prima column line. Questo significa che, di default, riempirà lo spazio dalla prima column line alla seconda e dalla terza row line alla quarta.
Quasi tutti i div sono stati impostati in questo modo. L’eccezione in questo caso è #sitemast. 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, che significa: “Comincia alla column line 1 e occupa due colonne”. Avrei potuto ottenere lo stesso risultato con il valore 1 / 3, che significa: “Vai dalla column line 1 alla column line 3”. (Fig. 5)
Fig. 5: Il posizionamento dei grid item
Ma dovete capire che quello è solo un diagramma, non la reale situazione di layout. Non ancora, perlomeno. Quello che voglio che sia chiaro qui è che mentre potete esplicitamente assegnare tutti i vostri grid item a specifiche righe e colonne, non dovete 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:
#sitemast {
grid-column: 1 / span 2;
}
#navigate {
grid-row: 2;
grid-column: 1;
}
Questo avrebbe assicurato che la testata fosse larga due colonne e che il div 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.
Detto ciò, gli item non assegnati sarebbero fluiti nella griglia nell’ordine del sorgente. La testata (#sitemast) sarebbe stata piazzata nella prima riga a due colonne che avrebbe trovato, che poi è la prima riga. Il div di ricerca sarebbe ricaduto nella cella aperta seguente, che è riga 2-colonna 2, perché riga 2-colonna 1 è già occupata dal div di navigazione. Dopo di che, il div 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.
Il risultato finale sarebbe esattamente quello mostrato nella Fig. 5. La differenza sarebbe che se avessi una pagina speciale in cui fosse aggiunto un altro div, 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.
Dati gli stili che ho scritto, se un elemento figlio del body venisse aggiunto alla pagina, diventerà un grid item. Se non gli dò una posizione esplicita nella griglia, finirà nella prima cella disponibile della griglia. Dal momento che la cella più in basso a destra (riga 4-colonna 2) non è occupata, lì è dove verrebbe posizionato l’elemento… Assumendo che non sia impostato per occupare due colonne. In quel caso, finirebbe nel fondo della griglia, in una quinta riga creata automaticamente.
Accomodare il passato#section4
È abbastanza facile impostare una griglia, ma quando gli si mettono dentro dei grid item, questi si tirano dietro tutti i loro stili già 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, creata usando una copia locale del sito.
Fig. 6: Grid + legacy = no
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.
Quindi ho incapsulato tutto in un blocco @supports. Dal momento che volevo vincolare il grid layout ai display più grandi, ho messo il blocco @media proprio all’interno di @supports 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 è uscito:
@supports (display: grid) {
@media (min-width: 60.001em) {
body {
display: grid;
grid-template-rows: 192px min-content min-content 1fr;
grid-template-columns: 1fr 20em;
}
#sitemast {
grid-row: 1;
grid-column: 1 / span 2;
}
#search {
grid-row: 2;
grid-column: 2;
position: static;
padding: 0.25em 0 1em;
}
#main {
grid-row: 3;
grid-column: 1;
margin-right: 0;
margin-top: 1.25em;
padding-top: 0;
}
.hpg #main {
margin-top: 0;
padding-top: 0;
}
#extra {
grid-row: 3;
grid-column: 2;
position: static;
top: 0;
margin-top: 0;
padding-top: 0.5em;
margin-left: auto;
}
#navigate {
grid-row: 2;
grid-column: 1;
position: static;
margin-top: 1px;
padding-bottom: 0;
}
#footer {
grid-row: 4;
grid-column: 1;
margin-right: 0;
}
}
}
Potrei probabilmente fare il refactor di questo codice per renderlo più efficiente, ma per ora lo lascerò così com’è. Rende chiaro quello che si è dovuto fare per ogni grid item, dove è stato necessario sovrascrivere le position così che la loro posizione assoluta non interagisse in maniera strana con la griglia, quali margin e padding hanno dovuto essere cambiati e così via. Diamo un’occhiata al risultato finale (Fig. 7).
Fig. 7: Grid + @supports = evviva!
Vi perdonerò se avete pensato che questo è stato tanto rumore per quasi nulla. Perché fare tutta questa fatica solo per farlo apparire identico? La cosa davvero potente qui, in quello che è, lo ammetto, un semplice esempio, è il modo in cui non devo più preoccuparmi delle sovrapposizioni. Il footer sarà sempre sotto ai div main ed extra, non importa quale è più alto. Quando usavo il posizionamento, questa cosa non era mai garantita.
In maniera simile, la navigazione e la ricerca manterranno sempre un’altezza condivisa, assicurando che nessuna delle due si sovrapporrà mai al contenuto sottostante e, grazie a min-content non devo più indovinare quanto diventeranno alte. Semplicemente, Grid gestisce tutto questo al mio posto.
E ricordate, il layout funziona ancora nei vecchi browser come ha sempre fatto, usando il posizionamento. Non ho “rotto” il sito per i browser che non comprendono Grid. Il più potente Grid layout è qui, aspettiamo che Chrome e Firefox lo capiscano.
Se volete vedere live tutto questo, andate su meyerweb.com e ispezionate gli elementi in Firefox 52 o superiori. Lì vedrete una piccola icona a forma di waffle di fianco alla dichiarazione display: grid sull’elemento body. Cliccatela e Firefox disegnerà le grid line sulla pagina così che possiate analizzarle. (Potete anche abilitare un tool di layout più potente nelle Nightly build di Firefox. Si veda il mio post “Grid Inspection” per ulteriori dettagli).
Convenzioni di naming#section5
Ho citato prima che è possibile dare un nome alle grid line. Io non l’ho fatto per i miei stili perché la griglia che ho definito era davvero semplice, ma per griglie più complicate può essere utile dare un nome alle linee.
Usando la versione stripped-down degli stili, quella senza tutte le sovrascritture legacy, si fa pressapoco così per dare un nome alle grid line:
body {
display: grid;
grid-template-rows: [masthead] 192px [navsearch] min-content [mainextra] min-content [footer] 1fr;
grid-template-columns: [left] 1fr [middle] 20em [right];
}
Ciascuna delle parole nelle parentesi quadre è assegnata come nome alla corrispondente grid line. (Fig. 8)
Fig. 8: Grid line con i nomi
Una volta definiti questi nomi, potete far riferimento a loro nelle vostre proprietà grid-row e grid-column. Per esempio:
#sitemast {
grid-row: masthead;
grid-column: left / span right;
}
#search {
grid-row: navsearch;
grid-column: middle;
}
#main {
grid-row: mainextra;
grid-column: left;
}
#extra {
grid-row: mainextra;
grid-column: middle;
}
#navigate {
grid-row: navsearch;
grid-column: left;
}
#footer {
grid-row: footer;
grid-column: left;
}
In maniera simile ai nomi delle class, potete assegnare più nomi a una grid line fornendo un elenco separato da spazi. Provate questo per esempio:
grid-template-columns: [start left] 1fr [middle sidebar] 20em [right end];
Potete poi far riferimento a uno qualsiasi di quei nomi nella vostra dichiarazione grid-column. Non c’è un limite definito sul numero di nomi, ma ricordate che a grandi poteri corrispondono…
Nel caso ve lo steste chiedendo, potete mischiare nomi e numeri per i grid line, quindi qualcosa come grid-row: navsearch; grid-column: 2;} va totalmente bene. Potete usare un qualsiasi nome di cui il browser possa fare il parsing, il che significa che potete specificare più o meno qualunque cosa Unicode e il character encoding del vostro file CSS permettono.
Grid e Flexbox#section6
Una domanda che potreste farvi è la seguente: adesso che abbiamo Grid, butto via Flexbox? Assolutamente no! I due possono lavorare insieme ed effettivamente lo fanno bene.
Prendiamo in considerazione la barra di navigazione del mio design. Per anni, è stata visualizzata usando una lista non ordinata e float: left per i list item. Semplificando un po’, il CSS e il markup sono così:
#navlinks {
float: left;
width: 100%;
}
#navlinks li {
float: left;
list-style: none;
margin-left: 1px;
}
<div id="navigate">
<ul id="navlinks">
<li><a href="…">Archives</a></li>
<li><a href="…">CSS</a></li>
<li><a href="…">Toolbox</a></li>
<li><a href="…">Writing</a></li>
<li>><a href="…">Speaking</a></li>
<li>>><a href="…">Leftovers</a></li>
</ul>
</div>
Perché non display: inline-block invece di float: left? Perché, 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.)
Adesso ho due opzioni molto migliori per sistemare quei link: Grid e Flexbox. Potrei definire una griglia qui, che potrebbe essere qualcosa così:
#navlinks {
display: grid;
grid-template-columns: repeat(6,min-content);
}
#navlinks li {
list-style: none;
margin-left: 1px;
}
Questo mi farebbe ottenere sostanzialmente lo stesso risultato ma in una griglia, il che è molto più robusto di qualunque float o inline block.
D’altro canto, dovrei usare Grid, che è un layout system bidimensionale, per un pezzo di layout unidimensionale. È sicuramente possibile farlo ma sembra un po’ forzato e non è effettivamente quello per cui Grid è stato pensato. Tuttavia, Flexbox è progettato esattamente per questo tipo di situazioni.
Quindi, al suo posto potrei scrivere quanto segue:
#navlinks {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
#navlinks li {
list-style: none;
margin-left: 1px;
}
Di nuovo, otterrei praticamente lo stesso risultato ma in maniera molto più robusta. Oltre a tenere i link tutti allineati, il valore wrap permette ai link di andare su una seconda riga se è necessario. E dal momento che flexbox è all’interno di un grid item che fa parte di una grid row la cui altezza è min-content, qualunque aumento in altezza (dovuto a un line wrap o ad altro) causerà l’aumento dell’altezza dell’intera riga. Questo significa che le righe dopo di essa si sposteranno in giù per accomodarla.
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, posso eliminare il div e riassegnare i suoi ID alla lista. Quindi il markup diventa:
<ul id="navigate">
<li><a href="…">Archives</a></li>
<li><a href="…">CSS</a></li>
<li><a href="…">Toolbox</a></li>
<li><a href="…">Writing</a></li>
<li><a href="…">Speaking</a></li>
<li><a href="…">Leftovers</a></li>
</ul>
Dopo aver sistemato i selettori nel mio CSS, passando da #navlinks a #navigate, il layout risultante sarà esattamente com’era prima. L’ul diventerà un grid item e un flex container. Questa è una cosa che potete fare.
Nel mio caso, lo svantaggio potrebbe essere la gestione delle interazioni tra quel cambiamento e il mio layout legacy, ma non è una questione enorme da risolve, si tratta solo di farlo.
Delusioni#section7
Allora, quali sono gli svantaggi? Non ce ne sono molti, ma esistono.
Principalmente, non c’è un modo per definire una griglia generale per la pagina a cui tutti gli elementi possano far riferimento. In altre parole, se dicessi:
body {
display: grid;
grid-template-columns: repeat(16, 1fr);
}
…questo imposterebbe una griglia flessibile di 16 colonne solo per l’elemento body 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. Questa è 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.
La possibilità di fare queste cose è nota come subgrid e non è ancora stata implementata in nessun browser. Ci sono questioni da chiarire su come dovrà o non dovrà funzionare esattamente, quindi c’è ancora moltissima speranza che tutto si sistemi alla fine. È 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.
Nel frattempo, sono sicuro che la gente se ne uscirà 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ù o meno così:
div.post {
display: grid;
grid-template-columns: [meta] 10em [main] 1fr;
grid-template-rows: [title] min-content [main] 1fr;
}
Con ciò, 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:
div.post h3 {
grid-column: 2;
grid-row: title;
}
ul.meta {
grid-column: meta;
grid-row: main;
}
div.post div.text {
grid-column: main;
grid-row: main;
}
Lo svantaggio è 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ù lungo di contenuto. Non è peggio di adesso, in cui imposto i metadati con float ad una esplicita larghezza, così da non perdermi niente. È semplicemente una piccola opportunità mancata (temporaneamente) per guadagnare qualcosa.
Un’altra limitazione, una che non si sa se verrà gestita, è che non potete assegnare direttamente degli stili alle celle della griglia. Supponiamo che volessi mettere un box attorno alla sidebar #extra, che riempia completamente quella cella. Dovrei assegnare uno stile al div. Non posso fare qualcosa come:
@grid-cell(2, 3) {
background: teal;
border: 1px solid;
}
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à all’interno del Working Group. Se avete degli use case per questo tipo di capacità, condivideteli sicuramente con il mondo e con le persone di www-style. Più abbiamo dei casi dal mondo reale più avremo motivi per supportarlo.
Inevitabilmente ci saranno dei bug da sistemare. Per esempio, mentre finivo questo articolo, ho scoperto che in alcune situazioni, Chrome 57 può soffrire di un page-blanking bug quando si usa Grid. Sembra sia causato dall’avere degli elementi con position absolute rimossi dalla pagina Grid e può essere scatenato da estensioni come Window Resizer e LastPass. La buona notizia è che una fix è stata accettata per Chrome 58, quindi dovrebbe essere sistemata al più tardi per la fine di Aprile 2017.
Grid power#section8
Spero che questa esplorazione dell’applicazione di Grid a un sito live vi abbia fornito un assaggio di quello che si può fare. Tuttavia, voglio avvertirvi che questo è 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 è possibile. (Grid gap! Grid molto dense! Griglie inline! Righe e colonne auto-filling!).
Ma ancora di più, quello che ho esplorato qui è una parte infinitesima di quello che Grid renderà possibile. Ovvio, può rendere i nostri design esistenti più flessibili, robusti e semplici da mantenere. E questo è fantastico, ma rende anche possibili dei layout che non ci saremmo mai sognati, perché 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ì profondo dallo spostamento originale da tabelle a CSS. Spero che farete parte di quelli che esploreranno questo nuovo regno.
Risorse#section9
Come ho detto, questa è, nella migliore delle ipotesi, un’introduzione. Volete saperne di più? Ecco alcune ottime risorse per cominciare:
- Announcing CSS Grid & the Firefox Grid Inspector Tool
- The Experimental Layout Lab of Jen Simmons — una collezione di esperimenti ed esempi, che spaziano dall’utile all’estremamente artistico
- CSS Grid Guides on MDN — un hub centrale per per 11 articoli di Rachel Andrew, scritti per Mozilla Developer Network
- Grid by Example — la raccolta di esempi, tutorial e video di Rachel Andrew
- Grid + Flexbox: the best 1-2 punch in web layout — un’ottima osservazione dell’unione di queste due tecniche di layout di Chen Hui Jing
Nessun commento
Altro da ALA
Webwaste
Uno strumento essenziale per catturare i vostri progressi lavorativi
Andiamo al cuore dell’accessibilità digitale
JavaScript Responsabile, Parte II
JavaScript Responsabile: parte prima