Livello 2 della griglia CSS: ecco la sottogriglia

Siamo ormai trascorsi più di un anno dall'arrivo di CSS Grid Layout nella maggior parte dei nostri browser e il CSS Working Group sta già lavorando al livello 2 della specifica. In questo articolo, spiegherò cosa fa attualmente parte del Working and Editor's Draft di quella specifica. Tieni presente che tutto qui è soggetto a modifiche e nessuno di essi attualmente funziona nei browser. Dai un'occhiata al processo, sono sicuro che scriverò pezzi più pratici quando inizieremo a vedere le implementazioni prendere forma.

Livelli di specifica CSS

Le funzionalità della griglia CSS che possiamo attualmente utilizzare nei browser sono quelle del livello 1 della specifica della griglia CSS. Le varie parti dei CSS sono suddivise in moduli; questa modularizzazione è avvenuta quando i CSS sono passati dai CSS 2.1, motivo per cui a volte si sente parlare di CSS3. In realtà, non esiste CSS3. Invece, c'era una serie di moduli che includevano tutte le cose che facevano già parte della specifica CSS2.1. Qualsiasi CSS che esisteva in CSS2.1 è diventato parte di un modulo di livello 3, quindi abbiamo selettori CSS di livello 3, poiché i selettori esistevano in CSS2.1.

Le nuove funzionalità CSS che non facevano parte di CSS2.1, come CSS Grid Layout, iniziano al livello 1. La specifica CSS Grid Level 1 è essenzialmente la prima versione di Grid. Una volta che un livello di specifica raggiunge lo stato di Raccomandazione Candidato, le nuove funzionalità principali non vengono aggiunte. Ciò significa che i browser e altri programmi utente possono implementare le specifiche e possono diventare una raccomandazione del W3C. Se devono essere progettate nuove funzionalità, si verificheranno in un nuovo livello della specifica. Siamo a questo punto con CSS Grid Layout. La specifica di livello 1 è in CR ed è stata creata una specifica di livello 2 per lavorare su nuove funzionalità. Suggerirei di guardare la bozza dell'editor se vuoi seguire le discussioni sulle specifiche, poiché conterrà tutte le ultime modifiche.

Cosa conterrà il livello 2 della griglia CSS?

In definitiva, la specifica del livello 2 conterrà tutto ciò che è già nel livello 1 più alcune nuove funzionalità. Se dai un'occhiata alle specifiche al momento della scrittura, c'è una nota che spiega che tutto il livello 1 dovrebbe essere copiato una volta che il livello 2 raggiunge CR.

Possiamo quindi aspettarci di trovare alcune nuove funzionalità e il livello 2 della specifica della griglia riguarda l' elaborazione della funzionalità della griglia secondaria della griglia CSS. Questa funzione è stata eliminata dalla specifica di livello 1 per consentire di comprendere correttamente i casi d'uso per la sottogriglia e concedere più tempo per lavorarci sopra senza ostacolare il resto del livello 1. Nel resto di questo articolo, tratterò dai un'occhiata alla funzione della griglia secondaria poiché è attualmente dettagliata nella bozza dell'editor. Siamo in una fase molto precoce con la funzionalità, tuttavia, questo è il momento perfetto per seguire e aiutare effettivamente a plasmare il modo in cui vengono sviluppate le specifiche. Il mio scopo nello scrivere questo articolo è spiegare alcune delle cose discusse, in modo che tu possa capire e portare il tuo contributo alle discussioni.

Che cos'è una griglia secondaria?

Quando usi CSS Grid Layout, puoi già nidificare le griglie. Nell'esempio seguente, ho una griglia padre con sei tracce di colonne e tracce di tre righe. Ho posizionato un elemento su questa griglia dalla riga di colonna 2 alla riga 6 e dalla riga di riga 1 a 3. Ho quindi trasformato quell'elemento in un contenitore di griglia e ho definito le tracce di colonna.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: 2fr 1fr 2fr 1fr; }

Le tracce della nostra griglia nidificata non hanno alcuna relazione con le tracce sul genitore. Ciò significa che se vogliamo essere in grado di allineare le tracce della nostra griglia nidificata con le linee sulla griglia esterna, dobbiamo fare il lavoro e utilizzare metodi di calcolo delle dimensioni delle tracce che assicurino che tutte le tracce rimangano uguali. Nell'esempio sopra, le tracce appariranno allineate, finché un elemento con una dimensione maggiore non viene aggiunto a una cella della griglia (facendo così utilizzare più spazio).

Per le colonne, è spesso possibile aggirare lo scenario precedente, essenzialmente limitando la flessibilità della griglia. Puoi rendere le colonne dell'unità fr minmax(0,1fr) in modo che ignorino le dimensioni dell'elemento durante la distribuzione dello spazio, oppure potresti tornare a utilizzare le percentuali. Tuttavia, questo rimuove alcuni dei vantaggi dell'utilizzo della griglia e, quando si tratta di allineare le righe in una griglia nidificata, questi metodi non funzioneranno.

Diciamo che vogliamo un layout di carte in cui le singole carte abbiano un'intestazione, un corpo e un piè di pagina. Vogliamo anche che l'intestazione e il piè di pagina siano allineati tra le carte.

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

Funziona fintanto che il contenuto ha la stessa altezza in ogni intestazione e piè di pagina. Se abbiamo contenuti extra, l'illusione si interrompe e le intestazioni e i piè di pagina non si allineano più lungo la riga.

Creazione di una griglia secondaria

Ora possiamo dare un'occhiata a come è attualmente specificata la funzione della griglia secondaria e come potrebbe risolvere i problemi che ho mostrato sopra.

Nota : al momento della scrittura, nessuno dei codici seguenti funziona nei browser. Lo scopo qui è di spiegare la sintassi e i concetti. È probabile che anche la specifica finale cambi da questi dettagli. Per riferimento, ho scritto questo articolo sulla base della bozza dell'editore disponibile il 23 giugno 2018.

Per creare una griglia secondaria, avremo un nuovo valore per grid-template-rows e grid-template-columns . Queste proprietà vengono normalmente utilizzate con un elenco di tracce, che definisce il numero e la dimensione delle tracce di riga e colonna. Quando si crea una griglia secondaria, tuttavia, non si desidera specificare queste tracce. Al contrario, si utilizza il valore della griglia subgrid per indicare alla griglia che questa griglia nidificata deve utilizzare il numero di tracce e il dimensionamento delle tracce che copre l'area della griglia.

Nel codice seguente, ho una griglia madre con tracce a 6 colonne e tracce a 3 righe. La griglia nidificata è un elemento della griglia su quella griglia madre e si estende dalla riga di colonna 2 alla riga di colonna 6 e dalla riga di riga 1 alla riga di riga 4. Questo è proprio come il nostro esempio iniziale, tuttavia, ora possiamo dargli un'occhiata usando sottogriglia. La griglia nidificata ha un valore di subgrid sia per grid-template-columns che per grid-template-rows . Ciò significa che la griglia nidificata ora ha tracce a 4 colonne e tracce a 2 righe, utilizzando lo stesso dimensionamento delle tracce definite sul genitore.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }

Ciò significherebbe che qualsiasi modifica al dimensionamento della traccia sul genitore sarebbe seguita dalla griglia nidificata. Una parola più lunga che allarga una delle tracce nella griglia padre comporterebbe che anche quella traccia nella griglia nidificata diventa più ampia, quindi le cose continuerebbero ad allinearsi. Questo funzionerebbe anche nell'altro modo: le tracce della griglia principale potrebbero allargarsi in base al contenuto nella griglia secondaria.

Sottogriglie unidimensionali

È possibile avere una griglia secondaria in una dimensione e specificare il dimensionamento della traccia in un'altra. In questo prossimo esempio, la griglia secondaria viene specificata solo su grid-template-columns . La proprietà grid-template-rows ha un elenco di tracce specificato. Le tracce di colonna rimarranno quindi come le quattro tracce che abbiamo visto sopra, ma le tracce di riga possono essere definite separatamente dalle tracce del genitore.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: 10em 5em 200px 200px; }

Ciò significa che le righe della griglia secondaria verranno nidificate all'interno della griglia principale, proprio come quando si crea una griglia nidificata oggi. Poiché la nostra griglia nidificata si estende su due righe del genitore, una o entrambe queste righe dovranno espandersi per contenere il contenuto della griglia secondaria in modo da non causare overflow.

Potresti anche avere una griglia secondaria in una dimensione e l'altra dimensione utilizzare tracce implicite. Nell'esempio seguente, non ho specificato alcuna traccia di riga e ho fornito un valore per grid-auto-rows . Le righe verranno create nella griglia implicita alla dimensione che ho specificato e, come nell'esempio precedente, il genitore dovrà avere spazio per queste righe o espandersi per contenerle.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-auto-rows: minmax(200px, auto); }

Numerazione delle righe e griglia secondaria

Se diamo un'occhiata al nostro primo esempio, il dimensionamento della traccia della nostra sottogriglia è dettato dal genitore in entrambe le dimensioni. I numeri di riga, tuttavia, agiscono normalmente nella griglia secondaria. La prima riga di colonna nella direzione inline è la riga 1 e la riga all'estremità più lontana della direzione inline è la riga -1. Non si fa riferimento alle righe della griglia secondaria con il numero di riga del genitore.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; } .subitem { grid-column: 2 / 4; grid-row: 2; }

Lacune e sottogriglie

La griglia secondaria erediterà qualsiasi spazio di colonna o riga impostato sulla griglia principale, tuttavia, questo può essere annullato dagli spazi di colonna e riga specificati nella griglia secondaria. Se, ad esempio, la griglia padre avesse uno column-gap impostato su 20px, ma la griglia secondaria avesse quindi column-gap impostato su 0, le celle della griglia della griglia secondaria guadagnerebbero 10px su ciascun lato per ridurre lo spazio a 0, con la linea della griglia essenzialmente corre lungo il centro del divario.

Ora possiamo vedere come la griglia secondaria ci aiuterebbe a risolvere il secondo caso d'uso dall'inizio di questo articolo, quello di avere carte con intestazioni e piè di pagina allineate sulle carte.

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: auto 1fr auto; grid-gap: 20px; } .card { grid-row: auto / span 3; /* use three rows of the parent grid */ display: grid; grid-template-rows: subgrid; grid-gap: 0; /* set the gap to 0 on the subgrid so our cards don't have gaps */ }

Nomi di linea e sottogriglia

Tutti i nomi di riga sulla griglia principale verranno passati alla griglia secondaria. Pertanto, se denominassimo le righe sulla nostra griglia principale, potremmo posizionare l'elemento in base a quei nomi di riga.

 .grid { display: grid; grid-template-columns: [a] 1fr [b] 2fr [c] 1fr [d] 2fr [e] 1fr [f] 2fr [g]; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: 10em 5em 200px 200px; } .subitem { grid-column: c / e; }

Puoi anche aggiungere nomi di linee alla tua griglia secondaria, le linee della griglia possono avere più nomi di linee in modo che questi nomi vengano aggiunti alle linee. Per specificare i nomi delle righe, aggiungi un elenco di questi nomi dopo il valore della griglia subgrid di grid-template-columns e grid-template-rows . Se prendiamo il nostro esempio sopra e aggiungiamo anche nomi alle linee della sottogriglia, ci ritroveremo con due nomi di riga per ogni linea nella sottogriglia.

 .grid { display: grid; grid-template-columns: [a] 1fr [b] 2fr [c] 1fr [d] 2fr [e] 1fr [f] 2fr [g]; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid [sub-a] [sub-b] [sub-c] [sub-d] [sub-e]; grid-template-rows: 10em 5em 200px 200px; } .subitem { grid-column: c / e; }

Tracce implicite e sottogriglia

Dopo aver deciso che una dimensione della griglia è una griglia secondaria, viene rimossa la possibilità di avere tracce implicite aggiuntive in quella dimensione. Se aggiungi più elementi che possono rientrare, gli elementi aggiuntivi verranno posizionati nell'ultima traccia disponibile della griglia secondaria nello stesso modo in cui gli elementi vengono trattati in griglie eccessivamente grandi. Un'area della griglia creata nella sottogriglia che si estende su più binari di quelli disponibili, avrà la sua ultima riga impostata sull'ultima riga della sottogriglia.

Come spiegato sopra, tuttavia, puoi fare in modo che una dimensione della tua sottogriglia si comporti esattamente allo stesso modo di una normale griglia nidificata, comprese le tracce implicite.

Partecipare al processo

Il lavoro del CSS Working Group avviene in pubblico, su GitHub come qualsiasi altro progetto open-source. Questo rende un po' più facile seguire il lavoro che è successo tutto in una mailing list. Puoi dare un'occhiata ai problemi sollevati rispetto al livello 2 della specifica CSS Grid cercando i problemi contrassegnati come css-grid-2 nel repository GitHub del CSS Working Group. Se puoi contribuire con pensieri o un caso d'uso a uno qualsiasi di questi problemi, sarebbe il benvenuto.

Ci sono altre funzionalità che le persone hanno richiesto per CSS Grid Layout, e il fatto che non siano state incluse nel Livello 2 non significa che non vengano prese in considerazione. Puoi vedere i livelli come potrebbe essere una versione di funzionalità in un prodotto, solo perché alcune funzionalità non fanno parte dello sprint corrente, non significa che non accadrà mai. Il lavoro sulle nuove funzionalità della piattaforma web tende a richiedere un po' più di tempo rispetto al rilascio medio del prodotto, ma è un processo simile.

Quanto tempo ci vuole tutto questo?

Lo sviluppo delle specifiche e l'implementazione del browser sono un processo iterativo alquanto circolare. Non è il caso che la specifica debba essere "completata" prima di vedere alcune implementazioni del browser. È probabile che le implementazioni iniziali siano dietro i flag delle funzionalità, proprio come lo era la specifica della griglia originale. Tieni d'occhio questi che appaiono, poiché una volta che c'è il codice con cui giocarci, pensare a queste funzionalità è molto più semplice!

Spero che questo tour di ciò che potrebbe arrivare presto sia stato interessante. Sono entusiasta del fatto che la funzionalità della griglia secondaria sia in corso, poiché l'ho sempre ritenuta vitale per un sistema di layout della griglia completo per il Web, guarda questo spazio per ulteriori notizie sull'avanzamento della funzionalità e sulle implementazioni emergenti del browser.