{"id":832,"date":"2018-05-29T06:56:06","date_gmt":"2018-05-29T04:56:06","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/faux-grid-tracks\/"},"modified":"2018-05-29T06:56:06","modified_gmt":"2018-05-29T04:56:06","slug":"faux-grid-tracks","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/faux-grid-tracks\/","title":{"rendered":"Faux Grid Tracks"},"content":{"rendered":"

Un po’ di tempo fa, \u00e8 stata postata questa domanda su css-discuss<\/a>:<\/p>\n

\n

\u00c8 possibile assegnare uno stile alle righe e alle colonne di una griglia [CSS], ossia alla griglia stessa? Devo fare un layout che usa un tabellone tipo quello del gioco del tris, completo di linee verticali e orizzontali del tabellone del tris, con testo\/icone in ogni cella della griglia.<\/p><\/blockquote>\n<\/div>\n

Mi aspetto che questa domanda salti fuori pi\u00f9 e pi\u00f9 volte man mano che si comincia ad esplorare Grid layout. La risposta breve \u00e8: no, non \u00e8 possibile farlo. Ma \u00e8<\/em> possibile simulare tale effetto, che \u00e8 quello che vorrei esplorare.<\/p>\n

\n

Definire la griglia<\/h2>\n

Dal momento che stiamo parlando di layout del tris, abbiamo bisogno di un elemento contenitore attorno ai nove elementi. Potremmo usare una lista ordinata, o un paragrafo con una serie di <span><\/code>, o una <section><\/code> con dei <div><\/code>. Scegliamo quest’ultima.<\/p>\n

<<\/span>section<\/span> id<\/span>=<\/span>\"<\/span>ttt\"<\/span><\/span>><\/span><\/span>\n\t<<\/span>div<\/span>><\/span><\/span>1<\/<\/span>div<\/span>><\/span><\/span>\n\t<<\/span>div<\/span>><\/span><\/span>2<\/<\/span>div<\/span>><\/span><\/span>\n\t<<\/span>div<\/span>><\/span><\/span>3<\/<\/span>div<\/span>><\/span><\/span>\n\t<<\/span>div<\/span>><\/span><\/span>4<\/<\/span>div<\/span>><\/span><\/span>\n\t<<\/span>div<\/span>><\/span><\/span>5<\/<\/span>div<\/span>><\/span><\/span>\n\t<<\/span>div<\/span>><\/span><\/span>6<\/<\/span>div<\/span>><\/span><\/span>\n\t<<\/span>div<\/span>><\/span><\/span>7<\/<\/span>div<\/span>><\/span><\/span>\n\t<<\/span>div<\/span>><\/span><\/span>8<\/<\/span>div<\/span>><\/span><\/span>\n\t<<\/span>div<\/span>><\/span><\/span>9<\/<\/span>div<\/span>><\/span><\/span>\n<\/<\/span>section<\/span>><\/span><\/span><\/code><\/pre>\n
Prendiamo quei nove <div><\/code> e mettiamoli in una griglia tre per tre, con ogni riga alta cinque em e ogni colonna larga cinque em. Impostare la struttura della griglia \u00e8 piuttosto semplice:<\/p>\n
#ttt <\/span>{<\/span>\n\tdisplay<\/span>:<\/span> grid;<\/span>\n\tgrid-template-columns<\/span>:<\/span> repeat(3,5em);<\/span>\n\tgrid-template-rows<\/span>:<\/span> repeat(3,5em);<\/span>\n}<\/span><\/code><\/pre>\n
Ecco fatto! Grazie all’algoritmo di auto-flow intrinseco di Grid Layout, questo \u00e8 sufficiente per mettere nove elementi <div><\/code> in nove celle della griglia. Da qui, creare l’aspetto di una griglia \u00e8 questione di impostare i bordi sugli elementi <div><\/code>. Ci sono molti modi per farlo, ma io ho scelto questo:<\/p>\n
#ttt > * <\/span>{<\/span>\n\tborder<\/span>:<\/span> 1px solid black;<\/span>\n\tborder-width<\/span>:<\/span> 0 1px 1px 0;<\/span>\n\tdisplay<\/span>:<\/span> flex;<\/span> \/* flex styling to center content in divs *\/<\/span>\n\talign-items<\/span>:<\/span> center;<\/span>\n\tjustify-content<\/span>:<\/span> center;<\/span>\n}<\/span>\n#ttt > *:nth-of-type(3n)  <\/span>{<\/span>\n\tborder-right-width<\/span>:<\/span> 0;<\/span>\n}<\/span>\n#ttt > *:nth-of-type(n+7) <\/span>{<\/span>\n\tborder-bottom-width<\/span>:<\/span> 0;<\/span>\n}<\/span><\/code><\/pre>\n
Il risultato \u00e8 mostrato nel layout di base qui sotto.<\/p>\n
\"Screenshot:<\/p>\n
Figura 1: il layout di base<\/p>\n<\/div>\n
Questo approccio ha il vantaggio di non essere basato sui nomi delle class e compagnia bella. Tuttavia si sgretola se il grid flow viene cambiato per essere colonnare, come possiamo vedere nella Figura 2.<\/p>\n
#ttt <\/span>{<\/span>\n\tdisplay<\/span>:<\/span> grid;<\/span>\n\tgrid-template-columns<\/span>:<\/span> repeat(3,5em);<\/span>\n\tgrid-template-rows<\/span>:<\/span> repeat(3,5em);<\/span>\n\tgrid-auto-flow<\/span>:<\/span> column;<\/span>  \/* a change in layout! *\/<\/span>\n}<\/span><\/code><\/pre>\n
\"Screenshot:<\/p>\n
Figura 2: il layout di base con grid flow colonnare.<\/p>\n<\/div>\n
Se il flow \u00e8 colonnare, allora le regole per l’applicazione dei bordi si ribaltano, cos\u00ec:<\/p>\n
#ttt > *:nth-of-type(3n) <\/span>{<\/span>\n\tborder-bottom-width<\/span>:<\/span> 0;<\/span>\n}<\/span>\n#ttt > *:nth-of-type(n+7) <\/span>{<\/span>\n\tborder-right-width<\/span>:<\/span> 0;<\/span>\n}<\/span><\/code><\/pre>\n
Questo ci riporta al risultato che abbiamo visto in Figura 1, ma con il contenuto in ordine colonnare invece che di riga. Non c’\u00e8 in Grid un row reverse<\/code> o un column reverse<\/code> come c’\u00e8 in flexbox, quindi dobbiamo solo preoccuparci dei pattern di flusso di righe e colonne.<\/p>\n
Ma cosa succede se un cambiamento successivo al design porta gli item della griglia ad essere risistemati in modi diversi? Per esempio, potrebbe esserci una ragione per prendere uno o due degli item e mostrarli per ultimi nella griglia, cos\u00ec:<\/p>\n
#ttt > *:nth-of-type(4), #ttt > *:nth-of-type(6) <\/span>{<\/span>\n\torder<\/span>:<\/span> 66;<\/span>\n}<\/span><\/code><\/pre>\n
Proprio come in flexbox, questo sposter\u00e0 i grid item mostrati fuori dall’ordine del sorgente, mettendoli dopo i grid item che non hanno valori espliciti di order<\/code>. Se questo tipo di nuova disposizione \u00e8 una possibilit\u00e0, non c’\u00e8 un modo semplice per attivare e disattivare i bordi per creare l’illusione di linee nella griglia interna. Cosa si fa?<\/p>\n<\/div>\n
\n
Attacco dei filler <b>!<\/h2>\n
Se vogliamo creare degli stili standalone che seguano le grid track, ossia, gli aspetti di presentazione che non sono direttamente collegati al contenuto verosimilmente risistemato, allora abbiamo bisogno di altri elementi da sistemare e a cui assegnare degli stili. Probabilmente, non avranno alcun contenuto, rendendoli una sorta di filler strutturali per riempire i gap delle capacit\u00e0 di Grid.<\/p>\n
Perci\u00f2, all’elemento <section><\/code>, possiamo aggiungere due elementi <b><\/code> con identificatori.<\/p>\n
<<\/span>section<\/span> id<\/span>=<\/span>\"<\/span>ttt\"<\/span><\/span>><\/span><\/span>\n\t<<\/span>b<\/span> id<\/span>=<\/span>\"<\/span>h\"<\/span><\/span>><\/span><\/span><\/<\/span>b<\/span>><\/span><\/span>\n\t<<\/span>b<\/span> id<\/span>=<\/span>\"<\/span>v\"<\/span><\/span>><\/span><\/span><\/<\/span>b<\/span>><\/span><\/span>\n\t<<\/span>div<\/span>><\/span><\/span>1<\/<\/span>div<\/span>><\/span><\/span>\n\t<<\/span>div<\/span>><\/span><\/span>2<\/<\/span>div<\/span>><\/span><\/span>\n\t<<\/span>div<\/span>><\/span><\/span>3<\/<\/span>div<\/span>><\/span><\/span>\n\u2026<\/code><\/pre>\n
Questi \u201cfiller <b><\/code>\u201d, come mi piace definirli, potrebbero essere messi ovunque all’interno di <section><\/code>, ma va bene all’inizio. Ci atterremo a questo. Poi aggiungeremo questi stili alla nostra griglia originale del layout di base<\/a>:<\/p>\n
b[id] <\/span>{<\/span>\n\tborder<\/span>:<\/span> 1px solid gray;<\/span>\n}<\/span>\nb#h <\/span>{<\/span>\n\tgrid-column<\/span>:<\/span> 1 \/ -1;<\/span>\n\tgrid-row<\/span>:<\/span> 2;<\/span>\n\tborder-width<\/span>:<\/span> 1px 0;<\/span>\n}<\/span>\nb#v <\/span>{<\/span>\n\tgrid-column<\/span>:<\/span> 2;<\/span>\n\tgrid-row<\/span>:<\/span> 1 \/ -1;<\/span>\n\tborder-width<\/span>:<\/span> 0 1px;<\/span>\n}<\/span><\/code><\/pre>\n
Quindi, il <b><\/code> orizzontale ha i bordi top e bottom e il <b><\/code> verticale ha i bordi left e right. Questo crea le linee del tabellone, come mostrato nella Figura 3.<\/p>\n
\"Screenshot:<\/p>\n
Figura 3: il layout base con i \u201cfiller <b><\/code>\u201d<\/p>\n<\/div>\n
Aspetta un attimo: abbiamo di nuovo la griglia del tris, ma adesso i numeri sono nei posti sbagliati, il che significa che i <div><\/code> che li contengono sono fuori posto. E il motivo \u00e8 questo: gli elementi <div><\/code> che contengono il contenuto effettivo non fluiranno pi\u00f9 automaticamente nelle celle della griglia, perch\u00e9 i filler <b><\/code> stanno gi\u00e0 occupando cinque delle nove celle. (Si tratta delle celle nella colonna e riga centrale della griglia). L’unico modo per riportare gli elementi <div><\/code> nelle loro celle della griglia prevista \u00e8 di piazzarceli esplicitamente. Ecco un modo per farlo:<\/p>\n
div:nth-of-type(3n+1) <\/span>{<\/span>\n\tgrid-column<\/span>:<\/span> 1;<\/span>\n}<\/span>\ndiv:nth-of-type(3n+2) <\/span>{<\/span>\n\tgrid-column<\/span>:<\/span> 2;<\/span>\n}<\/span>\ndiv:nth-of-type(3n+3) <\/span>{<\/span>\n\tgrid-column<\/span>:<\/span> 3;<\/span>\n}<\/span>\ndiv:nth-of-type(-n+3) <\/span>{<\/span>\n\tgrid-row<\/span>:<\/span> 1;<\/span>\n}<\/span>\ndiv <\/span>{<\/span>\n\tgrid-row<\/span>:<\/span> 2;<\/span>\n}<\/span>\ndiv:nth-of-type(n+7) <\/span>{<\/span>\n\tgrid-row<\/span>:<\/span> 3;<\/span>\n}<\/span><\/code><\/pre>\n
Questo funziona se sapete che il contenuto sar\u00e0 sempre disposto in ordine \u201cprima la riga poi la colonna\u201d. Passare a \u201cprima la colonna poi la riga\u201d richiede la riscrittura del CSS. Se i contenuti devono essere piazzati in un ordine confuso, allora dovrete scrivere una regola per ogni <div><\/code>.<\/p>\n
Questo probabilmente \u00e8 sufficiente per la maggior parte dei casi, ma spingiamoci oltre. Supponiamo di voler disegnare quelle linee della griglia senza interferire con il flusso automatico dei contenuti. Come possiamo farlo?<\/p>\n<\/div>\n
\n
Overgridding<\/h2>\n
Sarebbe comodo se ci fosse una propriet\u00e0 per marcare gli elementi come non partecipanti al grid flow, ma non c’\u00e8. Quindi, al contrario, suddivideremo i contenuti e i filler nelle proprie griglie e useremo una terza griglia per mettere una di quelle griglie sopra l’altra.<\/p>\n
Perch\u00e9 ci\u00f2 avvenga, \u00e8 necessario un po’ di cambiamento strutturale, perch\u00e9 funzioni, i contenuti e i filler <b><\/code> devono avere griglie identiche. Pertanto ci ritroviamo con:<\/p>\n
<<\/span>section<\/span> id<\/span>=<\/span>\"<\/span>ttt\"<\/span><\/span>><\/span><\/span>\n\t<<\/span>div<\/span> id<\/span>=<\/span>\"<\/span>board\"<\/span><\/span>><\/span><\/span>\n\t\t<<\/span>b<\/span> id<\/span>=<\/span>\"<\/span>h\"<\/span><\/span>><\/span><\/span><\/<\/span>b<\/span>><\/span><\/span>\n\t\t<<\/span>b<\/span> id<\/span>=<\/span>\"<\/span>v\"<\/span><\/span>><\/span><\/span><\/<\/span>b<\/span>><\/span><\/span>\n\t<\/<\/span>div<\/span>><\/span><\/span>\n\t<<\/span>div<\/span> id<\/span>=<\/span>\"<\/span>content\"<\/span><\/span>><\/span><\/span>\n\t\t<<\/span>div<\/span>><\/span><\/span>1<\/<\/span>div<\/span>><\/span><\/span>\n\t\t<<\/span>div<\/span>><\/span><\/span>2<\/<\/span>div<\/span>><\/span><\/span>\n\t\t<<\/span>div<\/span>><\/span><\/span>3<\/<\/span>div<\/span>><\/span><\/span>\n\t\t<<\/span>div<\/span>><\/span><\/span>4<\/<\/span>div<\/span>><\/span><\/span>\n\t\t<<\/span>div<\/span>><\/span><\/span>5<\/<\/span>div<\/span>><\/span><\/span>\n\t\t<<\/span>div<\/span>><\/span><\/span>6<\/<\/span>div<\/span>><\/span><\/span>\n\t\t<<\/span>div<\/span>><\/span><\/span>7<\/<\/span>div<\/span>><\/span><\/span>\n\t\t<<\/span>div<\/span>><\/span><\/span>8<\/<\/span>div<\/span>><\/span><\/span>\n\t\t<<\/span>div<\/span>><\/span><\/span>9<\/<\/span>div<\/span>><\/span><\/span>\n\t<\/<\/span>div<\/span>><\/span><\/span>\n<\/<\/span>section<\/span>><\/span><\/span><\/code><\/pre>\n
La prima cosa da fare \u00e8 dare ai <div><\/code> del tabellone e del contenuto griglie identiche. La stessa griglia che abbiamo usato prima, in effetti. Cambiamo solo un pochino il selettore della regola #ttt<\/var>, per selezionare invece i figli di #ttt<\/var>:<\/p>\n
#ttt > * <\/span>{<\/span>\n\tdisplay<\/span>:<\/span> grid;<\/span>\n\tgrid-template-columns<\/span>:<\/span> repeat(3,5em);<\/span>\n\tgrid-template-rows<\/span>:<\/span> repeat(3,5em);<\/span>\n}<\/span><\/code><\/pre>\n
Adesso che queste due griglie hanno lo stesso layout, dobbiamo piazzarne una sull’altra. Potremmo posizionare relativamente il container #ttt<\/var> e posizionare in maniera assoluta i suoi figli, ma c’\u00e8 un altro modo: usare Grid.<\/p>\n
#ttt <\/span>{<\/span> \/* new rule added *\/<\/span>\n\tdisplay<\/span>:<\/span> grid;<\/span>\n}<\/span>\n#ttt > * <\/span>{<\/span>\n\tdisplay<\/span>:<\/span> grid;<\/span>\n\tgrid-template-columns<\/span>:<\/span> repeat(3,5em);<\/span>\n\tgrid-template-rows<\/span>:<\/span> repeat(3,5em);<\/span>\n}<\/span><\/code><\/pre>\n
Ma aspettate: dove sono le righe e le colonne per #ttt<\/var>? Dove siamo diretti, non servono le righe (o le colonne). Ecco in che modo due griglie finiscono con l’occupare la stessa area con una sopra l’altra:<\/p>\n
#ttt <\/span>{<\/span>\n\tdisplay<\/span>:<\/span> grid;<\/span>\n}<\/span>\n#ttt > * <\/span>{<\/span>\n\tdisplay<\/span>:<\/span> grid;<\/span>\n\tgrid-template-columns<\/span>:<\/span> repeat(3,5em);<\/span>\n\tgrid-template-rows<\/span>:<\/span> repeat(3,5em);<\/span>\n\tgrid-column<\/span>:<\/span> 1;<\/span>  \/* explicit grid placement *\/<\/span>\n\tgrid-row<\/span>:<\/span> 1;<\/span>  \/* explicit grid placement *\/<\/span>\n}<\/span><\/code><\/pre>\n
Quindi, a #ttt<\/var> viene assegnata una griglia con una cella e i suoi due figli sono esplicitamente sistemati in quella singola cella. Pertanto, uno sta sopra l’altro, come con il posizionamento, ma a differenza del posizionamento, la dimensione della griglia pi\u00f9 esterna \u00e8 dettata dal layout dei suoi figli. Si ridimensioner\u00e0 per circondarli, anche se poi cambieremo le griglie interne perch\u00e9 siano pi\u00f9 grandi (o pi\u00f9 piccole). Possiamo vedere questo in pratica nella Figura 4, dove la griglia pi\u00f9 esterna \u00e8 delineata in viola nel Grid Inspector Tool di Firefox.<\/p>\n
\"Screenshot:<\/p>\n
Figura 4: Il layout overgridded<\/p>\n<\/div>\n
E questo \u00e8 quanto. Potremmo spingerci oltre, magari usando lo z-index<\/code> per disporre il tabellone sopra al contenuto (di default, l’elemento che viene dopo nel codice viene visualizzato sopra all’elemento che viene prima), ma questo \u00e8 sufficiente per il caso che abbiamo preso in considerazione.<\/p>\n
Il vantaggio \u00e8 che il <div><\/code> del contenuto, avendo solo da preoccuparsi dei suoi contenuti, pu\u00f2 fare uso di grid-auto-flow<\/code> e order<\/code> per riarrangiare le cose. Come esempio, potete fare cose come la seguente e non vi serviranno tutti i posizionamenti :nth-of-type<\/code> dei grid item del nostro precedente CSS. La Figura 5 mostra il risultato.<\/p>\n
\/* added to #snippet13 code *\/<\/span>\n#ttt > #content <\/span>{<\/span>\n\tgrid-auto-flow<\/span>:<\/span> column;<\/span>\n}<\/span>\n#ttt > #content > :nth-child(5) <\/span>{<\/span>\n\torder<\/span>:<\/span> 2;<\/span>\n}<\/span><\/code><\/pre>\n
\"Screenshot:<\/p>\n
Figura 5: Spostare il #5 alla fine e lasciare che gli altri item rifluiscano in colonne.<\/p>\n<\/div>\n<\/div>\n
\n
Precisazioni<\/h2>\n
Qui lo svantaggio, ed \u00e8 piuttosto grosso, \u00e8 che le griglie del tabellone e del contenuto sono solo minimamente coscienti l’una dell’altra. La ragione per cui l’esempio precedente funziona \u00e8 che le grid track sono di dimensione fissa e nessuna parte del contenuto \u00e8 in overflow. Supponiamo di volere che le colonne e le righe si ridimensionino in base al contenuto, cos\u00ec:<\/p>\n
#content <\/span>{<\/span>\n\tgrid-template-columns<\/span>:<\/span> repeat(3,min-content);<\/span>\n\tgrid-template-rows<\/span>:<\/span> repeat(3,min-content);<\/span>\n}<\/span><\/code><\/pre>\n
Questo si sgretoler\u00e0 presto, con le linee del tabellone non corrispondenti al layout del contenuto attuale. Per niente.<\/p>\n
In altre parole, questa tecnica della sovrapposizione sacrifica uno dei principali punti di forza di Grid: il modo in cui le celle della griglia si relazionano alle altre celle della griglia. Si tratta di un compromesso ragionevole nei casi in cui la dimensione del contenuto \u00e8 prevedibile ma l’ordinamento non lo \u00e8. In altri casi, probabilmente non \u00e8 una buona idea.<\/p>\n
Ricordatevi che questo funziona davvero solo con i layout in cui dimensioni e disposizione sono sempre noti e in cui a volte dovete disporre le griglie una sull’altra. Se il vostro filler <b><\/code> viene in contatto con un grid item implicitamente posizionato nella stessa griglia che occupa, gli verr\u00e0 impedito di allungarsi. (I grid item esplicitamente posizionati, ossia quelli in cui l’autore ha dichiaro i valori sia per grid-row<\/code> sia per grid-column<\/code>, non bloccano i filler <b><\/code>).<\/p>\n<\/div>\n
\n
Perch\u00e9 \u00e8 utile?<\/h2>\n
Ho realizzato che pochi tra noi avranno bisogno di creare un layout che assomigli a quello del tabellone del tris, quindi potreste chiedervi perch\u00e9 dovremmo preoccuparcene. Potremmo non volere delle strutture a forma di hashtag (#), ma ci saranno dei casi in cui vorremo dare uno stile all’intera column track o evidenziare una riga.<\/p>\n
Dal momento che (per ora) CSS non offre un modo per assegnare direttamente uno stile alle celle, aree o track della griglia, dobbiamo allungare gli elementi lungo le parti a cui vogliamo assegnare uno stile indipendentemente dagli elementi che contengono il contenuto. C’\u00e8 una discussione riguardante l’aggiunta di questa capacit\u00e0<\/a> direttamente a CSS nel repository GitHub del Working Group, dove voi<\/em> potete aggiungere i vostri pensieri e le vostre proposte.<\/p>\n<\/div>\n
\n
Ma perch\u00e9 i <b><\/code>? Perch\u00e9?<\/h2>\n
Uso i <b><\/code> per le porzioni decorative del layout perch\u00e9 sono elementi puramente decorativi. Non c’\u00e8 contenuto da enfatizzare molto o da rendere in grassetto e semanticamente un <b><\/code> non \u00e8 n\u00e9 meglio n\u00e9 peggio di uno <span><\/code>. \u00c8 solo un hook a cui agganciare degli effetti visivi. Ed \u00e8 pi\u00f9 corto, quindi minimizza il page bloat (alcuni caratteri in pi\u00f9 non farebbero tutta<\/em> sta differenza).<\/p>\n
Ancora pi\u00f9 in tema, la completa mancanza di significato semantico di <b><\/code> lo evidenzia subito nel markup come intenzionalmente non semantico. \u00c8, in questo senso meta, auto-documentante.<\/p>\n<\/div>\n
\n
\u00c8 tutto quello che c’\u00e8?<\/h2>\n
C’\u00e8 un altro modo per ottenere questo preciso effetto: i background e i grid gap. Ha anch’esso i suoi svantaggi, ma vediamo prima come funziona. Per prima cosa, impostiamo uno sfondo nero al grid container e degli sfondi bianchi a ogni item nella griglia. Poi, usando grid-gap: 1px<\/code>, facciamo apparire lo sfondo nero del container tra i grid item.<\/p>\n
<<\/span>section<\/span> id<\/span>=<\/span>\"<\/span>ttt\"<\/span><\/span>><\/span><\/span>\n\t<<\/span>div<\/span>><\/span><\/span>1<\/<\/span>div<\/span>><\/span><\/span>\n\t<<\/span>div<\/span>><\/span><\/span>2<\/<\/span>div<\/span>><\/span><\/span>\n\t<<\/span>div<\/span>><\/span><\/span>3<\/<\/span>div<\/span>><\/span><\/span>\n\t<<\/span>div<\/span>><\/span><\/span>4<\/<\/span>div<\/span>><\/span><\/span>\n\t<<\/span>div<\/span>><\/span><\/span>5<\/<\/span>div<\/span>><\/span><\/span>\n\t<<\/span>div<\/span>><\/span><\/span>6<\/<\/span>div<\/span>><\/span><\/span>\n\t<<\/span>div<\/span>><\/span><\/span>7<\/<\/span>div<\/span>><\/span><\/span>\n\t<<\/span>div<\/span>><\/span><\/span>8<\/<\/span>div<\/span>><\/span><\/span>\n\t<<\/span>div<\/span>><\/span><\/span>9<\/<\/span>div<\/span>><\/span><\/span>\n<\/<\/span>section<\/span>><\/span><\/span><\/code><\/pre>\n
#ttt <\/span>{<\/span>\n\tdisplay<\/span>:<\/span> grid;<\/span>\n\tgrid-template-columns<\/span>:<\/span> repeat(3,5em);<\/span>\n\tgrid-template-rows<\/span>:<\/span> repeat(3,5em);<\/span>\n\tbackground<\/span>:<\/span> black;<\/span>\n\tgrid-gap<\/span>:<\/span> 1px;<\/span>\n}<\/span>\n#ttt > div <\/span>{<\/span>\n\tbackground<\/span>:<\/span> white;<\/span>\n}<\/span><\/code><\/pre>\n
Semplice e non c’\u00e8 bisogno di alcun filler <b><\/code>. Cosa non va?<\/p>\n
Il primo problema \u00e8 che se mai rimuoveste un item, ci sarebbe un grosso blocco nero nel layout. Magari va bene, ma \u00e8 pi\u00f9 probabile che non vada bene. Il secondo problema \u00e8 che i grid container, di default, non applicano \u201cshrink-wrap\u201d ai loro item. Al contrario, riempiranno l’elemento padre, come fanno i box block. Entrambe questi problemi sono illustrati nella Figura 6.<\/p>\n
\"Screenshot:<\/p>\n
Figura 6: alcuni possibili problemi di background.<\/p>\n<\/div>\n
Potete usare del CSS extra per restringere la larghezza del grid container ma non si pu\u00f2 davvero evitare il background che appare dove manca un item.<\/p>\n
D’altro canto, questi problemi potrebbero trasformarsi in vantaggi se, invece di un background nero, volessimo mostrare un’immagine di background che faccia \u201cforare\u201d lo spazio ai grid item, come ha fatto Jen Simmons nella sua demo \u201cJazz At Lincoln Center Poster\u201d<\/a>.<\/p>\n
Un terzo problema nell’uso dei background \u00e8 quando volete semplicemente delle grid line solide rispetto a un background di pagina variegato e volete che quel background di mostri attraverso i grid item. In quel caso, i grid item (in questo caso, i <div><\/code>) devono avere i background trasparenti, il che impedisce l’uso di grid-gap per rivelare un colore.<\/p>\n
Se i <b><\/code> vi fanno davvero<\/em> andare in fumo il cervelletto, potete usare al loro posto il contenuto generato. Quando generate gli pseudo-elementi before- e after-content, Grid li tratta come elementi effettivi e li fa diventare dei grid item. Quindi, usando il semplice markup usato nell’esempio precedente, potremmo scrivere questo CSS invece:<\/p>\n
#ttt <\/span>{<\/span>\n\tdisplay<\/span>:<\/span> grid;<\/span>\n\tgrid-template-columns<\/span>:<\/span> repeat(3,5em);<\/span>\n\tgrid-template-rows<\/span>:<\/span> repeat(3,5em);<\/span>\n}<\/span>\n#ttt::before <\/span>{<\/span>\n\tgrid-column<\/span>:<\/span> 1 \/ -1;<\/span>\n\tgrid-row<\/span>:<\/span> 2;<\/span>\n\tborder-width<\/span>:<\/span> 1px 0;<\/span>\n}<\/span>\n#ttt::after <\/span>{<\/span>\n\tgrid-column<\/span>:<\/span> 2;<\/span>\n\tgrid-row<\/span>:<\/span> 1 \/ -1;<\/span>\n\tborder-width<\/span>:<\/span> 0 1px;<\/span>\n}<\/span><\/code><\/pre>\n
\u00c8 identico a quello con i filler <b><\/code>, tranne che qui gli elementi generati disegnano le grid line.<\/p>\n
Questo approccio funziona bene per ogni griglia 3×3 come quella con cui ho giocato, ma andando oltre, si va sul complicato. Supponiamo di avere una griglia 5×4 invece di una 3×3. Usando i gradienti e le ripetizioni, possiamo disegnare quante linee desideriamo, al costo di rendere pi\u00f9 complicato il CSS.<\/p>\n
#ttt <\/span>{<\/span>\n\tdisplay<\/span>:<\/span> grid;<\/span>\n\tgrid-template-columns<\/span>:<\/span> repeat(5,5em);<\/span>\n\tgrid-template-rows<\/span>:<\/span> repeat(4,5em);<\/span>\n}<\/span>\n#ttt::before <\/span>{<\/span>\n\tcontent<\/span>:<\/span> \"\"<\/span>;<\/span>\n\tgrid-column<\/span>:<\/span> 1 \/ -1;<\/span>\n\tgrid-row<\/span>:<\/span> 1 \/ -2;<\/span>\n\tbackground<\/span>:<\/span>\n\t\tlinear-gradient(to bottom,transparent 4.95em, 4.95em, black 5em)\n\t\ttop left \/ 5em 5em;<\/span>\n}<\/span>\n#ttt::after <\/span>{<\/span>\n\tcontent<\/span>:<\/span> \"\"<\/span>;<\/span>\n\tgrid-column<\/span>:<\/span> 1 \/ -2;<\/span>\n\tgrid-row<\/span>:<\/span> 1 \/ -1;<\/span>\n\tbackground<\/span>:<\/span>\n\t\tlinear-gradient(to right,transparent 4.95em, 4.95em, black 5em)\n\t\ttop left \/ 5em 5em;<\/span>\n}<\/span><\/code><\/pre>\n
\"Screenshot:<\/p>\n
Figura 7: elementi generati e gradienti di background<\/p>\n<\/div>\n
Questo approccio usa i gradienti linear per costruire immagini quasi interamente trasparenti che hanno solo 1\/20mo di un em di nero e poi ripetono quelli o verso destra o verso il basso. Il gradiente verso il basso (che crea linee orizzontali) viene fermato una gridline prima della fine del container, dal momento che altrimenti ci sarebbe una linea orizzontale sotto l’ultima riga di item. In maniera simile, il gradiente verso destra (che crea le linee verticali) si ferma una colonna prima del bordo a destra. Questo \u00e8 il motivo per cui ci sono i valori -2 per grid-column<\/code> e grid-row<\/code>.<\/p>\n
Uno svantaggio di questo \u00e8 lo stesso dell’approccio dei filler <b><\/code>: dal momento che gli elementi generati coprono la maggior parte del background, tutti gli item devono essere assegnati esplicitamente alle loro celle della griglia invece di lasciare che fluiscano automaticamente. L’unico modo per aggirare ci\u00f2 \u00e8 di usare qualcosa come la tecnica overgridding esplorata in precedenza. Potreste anche riuscire a eliminare gli elementi generati se fate l’overgridding, a seconda della specifica situazione.<\/p>\n
Un altro svantaggio \u00e8 che se mai dovesse cambiare il font size, la larghezza delle linee potrebbe cambiare. Mi aspetto che ci sia un modo per aggirare questo problema usando calc()<\/code>, ma lascer\u00f2 alle vostre brillanti menti trovarlo e condividerlo con il mondo.<\/p>\n
La parte divertente per me \u00e8 che se effettivamente<\/em> usate questo approccio basato sul gradiente, state riempiendo di immagini il background del container, mettendoci sopra degli item\u2026  Esattamente come facevamo con le Faux Columns.<\/p>\n<\/div>\n
\n
Conclusioni<\/h2>\n
\u00c8 divertente come alcuni concetti si ripetano negli anni. Pi\u00f9 di un decennio fa, Dan Cederholm ci ha mostrato come creare l’effetto di colonne a tutta altezza<\/a> con le immagini di background. Ora io vi mostro come simulare box con colonne e righe a tutta altezza con degli elementi vuoti e, ove necessario, con le immagini di background.<\/p>\n
Col tempo, il trucco che sta dietro le Faux Columns \u00e8 caduto in disgrazia e il web design ha lasciato perdere quel tipo di effetto visuale. Forse lo stesso destino attende le Faux Grid Tracks, ma spero di vedere il sorgere di nuove capacit\u00e0 CSS che permettano questo tipo di effetto senza il bisogno di questi trucchi.<\/p>\n
Abbiamo superato cos\u00ec tanti dei nostri vecchi trucchi. Eccone un altro da usare finch\u00e9 ce n’\u00e8 bisogno e che spero un giorno ci potremo lasciare alle spalle.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
L’unico modo per vincere \u00e8 giocare. Viaggiate con Eric Meyer attraverso i meccanismi interni di CSS Grid mentre testa varie tecniche per costruire un tabellone per il gioco del tris riempito con dei contenuti. Prestando attenzione alle fasi iniziali di CSS e di A List Apart, questi hack giocosi riattivano lo spirito della sperimentazione.<\/p>\n","protected":false},"author":818,"featured_media":7000839,"comment_status":"open","ping_status":"open","template":"","categories":[244,214],"tags":[],"coauthors":[304],"class_list":["post-832","article","type-article","status-publish","has-post-thumbnail","hentry","category-css","category-numero-235-28-novembre-2017"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/832","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=832"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000839"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=832"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=832"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=832"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=832"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Questo funziona piuttosto bene, come mostrato in Figura 7, supponendo che facciate l’esercizio di assegnare le grid cell in maniera simile a come abbiamo fatto nella #snippet9<\/a>.<\/p>\n
Il 1 \/ -1<\/code> significa \u201cvai dalla prima grid line all’ultima grid line dell’explicit grid<\/a>\u201d, indipendentemente da quante grid line possano esserci. \u00c8 un pattern comodo da usare in ogni situazione in cui si ha un grid item che dovrebbe allungarsi da lato a lato di una griglia.<\/p>\n