Grid

Podcast su CSS - 011: Griglia

Un layout molto comune nel web design è quello di intestazione, barra laterale, corpo e piè di pagina.

Nel corso degli anni, ci sono stati molti metodi per risolvere questo layout, ma la griglia CSS è relativamente semplice, ma offre anche molte opzioni. La griglia è estremamente utile per combinare il controllo offerto dal dimensionamento estrinseco con la flessibilità del dimensionamento intrinseco, che lo rende ideale per questo tipo di layout. Questo perché la griglia è un metodo di layout progettato per i contenuti bidimensionali. ovvero disporre contemporaneamente in righe e colonne.

Quando crei un layout a griglia, definisci una griglia con righe e colonne. Poi inserisci gli elementi nella griglia o consenti al browser di inserirli automaticamente nelle celle create. Le griglie sono tante, ma con una panoramica di ciò che è disponibile realizzerai layout a griglia in pochissimo tempo.

Panoramica

Cosa puoi fare con la griglia? I layout a griglia hanno le seguenti funzionalità. In questa guida verranno illustrate tutte le funzioni.

1. È possibile definire una griglia con righe e colonne. Puoi scegliere come ridimensionare le tracce di righe e colonne o queste possono adattarsi alle dimensioni dei contenuti.
2. I figli diretti del contenitore della griglia verranno posizionati automaticamente in questa griglia.
3. In alternativa, puoi posizionare gli elementi nella posizione esatta che preferisci.
4. È possibile assegnare un nome alle linee e alle aree sulla griglia per facilitare il posizionamento.
5. Lo spazio libero nel contenitore della griglia può essere distribuito tra i binari.
6. Gli elementi della griglia possono essere allineati all'interno della loro area.

Terminologia griglia

La griglia presenta una serie di nuova terminologia poiché è la prima volta che CSS ha un vero sistema di layout.

Linee della griglia

Una griglia è costituita da linee che corrono orizzontalmente e verticalmente. Se la griglia ha quattro colonne, avrà cinque righe di colonna, inclusa quella dopo l'ultima.

Le righe sono numerate a partire da 1, la numerazione segue la modalità di scrittura e la direzione dello script del componente. Ciò significa che la riga di colonna 1 sarà a sinistra in una lingua da sinistra a destra, come l'inglese, e sulla destra in una lingua da destra a sinistra, come l'arabo.

Tracce della griglia

Una rotta è lo spazio tra due linee della griglia. Una traccia riga è tra due righe di riga e una traccia colonna tra due righe di colonna. Quando creiamo la griglia, creiamo queste tracce assegnando loro una dimensione.

Cella della griglia

Una cella della griglia è lo spazio più piccolo su una griglia definita dall'intersezione di tracce di righe e colonne. È come la cella di una tabella o di un foglio di lavoro. Se definisci una griglia e non posizioni nessuno degli elementi, verrà automaticamente disposto un elemento in ogni cella della griglia definita.

Area della griglia

Più celle della griglia unite. Le aree della griglia vengono create facendo in modo che un elemento si estenda su più tracce.

Lacune

Una grondaia o un vicolo tra i binari. Ai fini del dimensionamento, funzionano come una traccia normale. Non puoi inserire contenuti in un intervallo, ma puoi estenderlo tra gli elementi della griglia.

Contenitore griglia

L'elemento HTML a cui è stato applicato display: grid, e crea quindi un nuovo contesto di formattazione della griglia per gli elementi secondari diretti.

.container {
  display: grid;
}

Elemento della griglia

Un elemento della griglia è un elemento secondario diretto del contenitore della griglia.

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Righe e colonne

Per creare una griglia di base, puoi definire una griglia con tre tracce di colonne, due tracce di riga e uno spazio di 10 pixel tra le tracce.

.container {
    display: grid;
    grid-template-columns: 5em 100px 30%;
    grid-template-rows: 200px auto;
    gap: 10px;
}

Questa griglia mostra molte delle cose descritte nella sezione terminologica. Ha tre colonne traccia. Ogni traccia utilizza un'unità di lunghezza diversa. Ha due tracce riga, una che utilizza un'unità di lunghezza e l'altra automatica. Quando viene utilizzato come traccia, il dimensionamento automatico può essere considerato grande quanto i contenuti. Le tracce vengono ridimensionate automaticamente per impostazione predefinita.

Se l'elemento con una classe .container include elementi secondari, verranno immediatamente disposti in questa griglia. Puoi vedere come funziona nella demo qui sotto.

L'overlay griglia in Chrome DevTools può aiutarti a comprendere le varie parti della griglia.

Apri la demo in Chrome. Ispeziona l'elemento con lo sfondo grigio, che ha un ID container. Evidenzia la griglia selezionando il badge della griglia nel DOM, accanto all'elemento .container. Nella scheda Layout, seleziona Numeri di linee da visualizzare nel menu a discesa per vedere i numeri di riga sulla griglia.

Parole chiave intrinseche relative al dimensionamento

Oltre alle dimensioni di lunghezza e percentuale come descritto nella sezione relativa alle unità di dimensione, le tracce della griglia possono utilizzare parole chiave intrinseche relative al dimensionamento. Queste parole chiave sono definite nella specifica delle dimensioni dei riquadri e aggiungono ulteriori metodi per il dimensionamento delle caselle in CSS, non solo le tracce della griglia.

• min-content
• max-content
• fit-content()

La parola chiave min-content rimuove le dimensioni minime di una traccia senza eccedere i contenuti della traccia. Se modifichi il layout a griglia di esempio in modo da includere tre tracce di colonne tutte con dimensioni min-content, le tracce diventeranno strette quanto la parola più lunga della traccia.

La parola chiave max-content ha l'effetto opposto. La traccia acquisirà la stessa larghezza necessaria affinché tutti i contenuti vengano visualizzati in un'unica lunga stringa ininterrotta. Ciò potrebbe causare overflow, poiché la stringa non andrà a capo.

Inizialmente, la funzione fit-content() si comporta come max-content. Tuttavia, una volta che la traccia raggiunge le dimensioni trasferite alla funzione, il wrapping dei contenuti inizia. Pertanto, fit-content(10em) creerà una traccia di dimensioni inferiori a 10 em, se la dimensione di max-content è inferiore a 10 em, ma mai superiore a 10 em.

Nella prossima demo, prova le diverse parole chiave relative al dimensionamento intrinseco modificando le dimensioni delle tracce della griglia.

L'unità fr

Abbiamo già le dimensioni di lunghezza, le percentuali e anche queste nuove parole chiave. C'è anche un metodo speciale di dimensionamento che funziona solo nel layout a griglia. Questa è l'unità fr, una lunghezza flessibile che descrive una quota dello spazio disponibile nel contenitore della griglia.

L'unità fr funziona in modo simile all'utilizzo di flex: auto in flexbox. Distribuisce lo spazio dopo la disposizione degli elementi. Pertanto, per avere tre colonne che ricevono tutte la stessa quota di spazio disponibile:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Poiché l'unità fr condivide lo spazio disponibile, può essere combinata con intervalli di dimensioni fisse o intervalli predefiniti. Per avere un componente con un elemento di dimensioni fisse e la seconda traccia che occupa lo spazio rimasto, puoi usare come tracklist di grid-template-columns: 200px 1fr.

Se utilizzi valori diversi per l'unità fr, lo spazio verrà condiviso in proporzione. Valori più grandi che ottengono una quantità maggiore di spazio libero. Nella demo di seguito, modifica il valore della terza traccia.

La funzione minmax()

Questa funzione consente di impostare le dimensioni minime e massime di una traccia. Questo può essere molto utile. Se prendiamo l'esempio dell'unità fr sopra che distribuisce lo spazio rimanente, potrebbe essere scritto utilizzando minmax() come minmax(auto, 1fr). La griglia esamina le dimensioni intrinseche dei contenuti, quindi distribuisce lo spazio disponibile dopo aver lasciato spazio sufficiente. Ciò significa che potresti non ottenere tracce ognuna delle quali ha la stessa quota di tutto lo spazio disponibile nel contenitore della griglia.

Per forzare una traccia a occupare una quota uguale dello spazio nel contenitore della griglia meno gli intervalli vuoti, utilizza minmax. Sostituisci 1fr come dimensione della traccia con minmax(0, 1fr). In questo modo la dimensione minima della traccia sarà pari a 0 e non sarà la dimensione minima dei contenuti. La griglia prenderà tutte le dimensioni disponibili nel container, deduce la dimensione necessaria per eventuali lacune e condividerà il resto in base alle unità fr.

Notazione repeat()

Se vuoi creare una griglia di tracciamento a 12 colonne con colonne uguali, puoi utilizzare il seguente CSS.

.container {
    display: grid;
    grid-template-columns:
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr);
}

In alternativa, puoi scriverlo utilizzando repeat():

.container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
}

La funzione repeat() può essere utilizzata per ripetere qualsiasi sezione dell'elenco delle tracce. Ad esempio, puoi ripetere uno schema di tracce. Puoi anche avere alcune tracce normali e una sezione ricorrente.

.container {
    display: grid;
    grid-template-columns: 200px repeat(2, 1fr 2fr) 200px; /*creates 6 tracks*/
}

auto-fill e auto-fit

Puoi combinare tutto ciò che hai appreso sul dimensionamento delle tracce, minmax() e sulle ripetizioni, per creare un pattern utile con il layout a griglia. È possibile che tu non voglia specificare il numero di tracce di colonne, ma preferisci crearne tutte quelle che si adattano al tuo container.

Puoi ottenere questo risultato con le parole chiave repeat() e auto-fill o auto-fit. Nella demo sottostante, la griglia creerà tutte le tracce di 200 pixel che si adattano al contenitore. Apri la demo in una nuova finestra e guarda come cambia la griglia quando modifichi le dimensioni dell'area visibile.

Nella demo troviamo tutte le tracce che puoi. I percorsi non sono tuttavia flessibili. Otterrai uno spazio alla fine fino a quando non ci sarà spazio sufficiente per un'altra traccia da 200 pixel. Se aggiungi la funzione minmax(), puoi richiedere tutte le tracce che vuoi con una dimensione minima di 200 pixel e un massimo di 1 fr. La griglia dispone le tracce di 200 pixel e lo spazio rimanente viene distribuito equamente tra loro.

In questo modo viene creato un layout adattabile bidimensionale che non richiede query supporti.

Esiste una sottile differenza tra auto-fill e auto-fit. Nella demo successiva, riproduci un layout a griglia utilizzando la sintassi descritta sopra, ma solo due elementi della griglia nel contenitore della griglia. Utilizzando la parola chiave auto-fill, puoi vedere che sono state create tracce vuote. Se modifichi la parola chiave in auto-fit, le tracce verranno compresse a 0 dimensioni. Ciò significa che i canali flessibili ora crescono fino a occupare lo spazio.

In caso contrario, le parole chiave auto-fill e auto-fit agiscono esattamente allo stesso modo. Una volta riempita la prima traccia, non c'è alcuna differenza.

Posizionamento automatico

Finora hai già visto il posizionamento automatico della griglia in azione nelle demo. Gli elementi vengono posizionati nella griglia, uno per cella nell'ordine in cui appaiono nell'origine. Per molti layout potrebbe essere sufficiente. Se hai bisogno di un maggiore controllo, ci sono un paio di operazioni che potresti svolgere. La prima è modificare il layout del posizionamento automatico.

Posizionamento degli elementi in colonne

Il comportamento predefinito del layout a griglia è il posizionamento degli elementi lungo le righe. Puoi invece scegliere di posizionare gli elementi nelle colonne utilizzando grid-auto-flow: column. Devi definire le tracce per le righe, altrimenti gli elementi creeranno tracce di colonne intrinseche e il layout verrà implementato in un'unica riga lunga.

Questi valori sono correlati alla modalità di scrittura del documento. Una riga viene sempre eseguita nella direzione di esecuzione di una frase nella modalità di scrittura del documento o del componente. Nella demo successiva puoi modificare la modalità del valore di grid-auto-flow e della proprietà writing-mode.

Spanning delle tracce

È possibile fare in modo che alcuni o tutti gli elementi in un layout posizionato automaticamente si estendono su più di una traccia. Utilizza la parola chiave span più il numero di righe da includere come valore per grid-column-end o grid-row-end.

.item {
    grid-column-end: span 2; /* will span two lines, therefore covering two tracks */
}

Poiché non hai specificato un valore grid-column-start, viene utilizzato il valore iniziale di auto e viene posizionato in base alle regole di posizionamento automatico. Puoi anche specificare la stessa cosa utilizzando l'abbreviazione grid-column:

.item {
    grid-column: auto / span 2;
}

Colmare le lacune

Un layout posizionato automaticamente con alcuni elementi che si estendono su più canali potrebbe generare una griglia con alcune celle vuote. Il comportamento predefinito del layout a griglia con posizionamento completamente automatico è di avanzare sempre in avanti. Gli articoli verranno posizionati in base all'ordine in cui sono nella sorgente o in base a qualsiasi modifica alla proprietà order. Se non c'è abbastanza spazio per inserire un elemento, grid lascerà uno spazio e passerà alla traccia successiva.

La demo successiva mostra questo comportamento. La casella di controllo applicherà la modalità dense packing. Questa opzione viene attivata assegnando a grid-auto-flow un valore pari a dense. Quando questo valore è attivo, la griglia prenderà gli elementi in un secondo momento nel layout e li utilizzerà per colmare le lacune. Ciò potrebbe causare la disconnessione del display dall'ordine logico.

Posizionamento degli elementi

Hai già molte funzionalità di CSS Grid. Diamo ora un'occhiata a come posizioni gli elementi sulla griglia che abbiamo creato.

La prima cosa da ricordare è che il layout griglia CSS si basa su una griglia di linee numerate. Il modo più semplice per posizionare elementi sulla griglia è posizionarli da una riga all'altra. In questa guida scoprirai altri modi per posizionare gli elementi, ma avrai sempre accesso alle righe numerate.

Le proprietà che puoi utilizzare per posizionare elementi in base al numero di riga sono:

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

Hanno scorciatoie che ti consentono di impostare contemporaneamente le righe di inizio e di fine:

• grid-column
• grid-row

Per posizionare l'elemento, imposta le righe di inizio e fine dell'area della griglia in cui deve essere posizionato.

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 200px 100px);
}

.item {
    grid-column-start: 1; /* start at column line 1 */
    grid-column-end: 4; /* end at column line 4 */
    grid-row-start: 2; /*start at row line 2 */
    grid-row-end: 4; /* end at row line 4 */
}

Chrome DevTools può fornirti una guida visiva per capire dove è posizionato l'elemento.

La numerazione delle righe segue la modalità di scrittura e la direzione del componente. Nella demo successiva cambia la modalità o la direzione di scrittura per vedere come il posizionamento degli elementi rimane coerente con il flusso del testo.

Sovrapposizione di elementi

Utilizzando il posizionamento basato su linee puoi posizionare elementi nella stessa cella della griglia. Ciò significa che puoi sovrapporre elementi o far sì che un elemento si sovrapponga parzialmente a un altro. Gli elementi provenienti in seguito nell'origine verranno visualizzati sopra quelli precedenti. Puoi modificare questo ordine di sovrapposizione utilizzando z-index proprio come per gli elementi posizionati.

Numeri di riga negativi

Quando crei una griglia utilizzando grid-template-rows e grid-template-columns, crei la cosiddetta griglia esplicita. Si tratta di una griglia che hai definito e hai assegnato dimensioni alle tracce.

A volte potresti avere degli elementi che vengono visualizzati al di fuori di questa griglia esplicita. Ad esempio, puoi definire tracce di colonna e poi aggiungere diverse righe di elementi della griglia senza mai definire tracce delle righe. Le tracce verranno ridimensionate automaticamente per impostazione predefinita. Puoi anche inserire un elemento utilizzando grid-column-end al di fuori della griglia esplicita definita. In entrambi i casi, la griglia creerà delle tracce per far funzionare il layout e queste tracce sono denominate griglia implicita.

Il più delle volte non fa alcuna differenza lavorare con una griglia implicita o esplicita. Tuttavia, con il posizionamento basato su linee, potresti incorrere nella differenza principale tra i due.

Utilizzando i numeri di riga negativi, puoi posizionare elementi dalla riga finale della griglia esplicita. Questo può essere utile se vuoi che un elemento si estenda dalla prima all'ultima riga di colonna. In questo caso, puoi utilizzare grid-column: 1 / -1. L'elemento si estenderà lungo la griglia esplicita.

Tuttavia, questo funziona solo per la griglia esplicita. Utilizza un layout di tre righe di elementi posizionati automaticamente in modo che il primo elemento si estende fino alla riga finale della griglia.

Potresti pensare di poter assegnare grid-row: 1 / -1 a quell'articolo. Nella demo di seguito puoi vedere che questa soluzione non funziona. Le tracce vengono create nella griglia implicita, non è possibile raggiungere la fine della griglia utilizzando -1.

Ridimensionamento delle tracce implicite

Le tracce create nella griglia implicita verranno ridimensionate automaticamente per impostazione predefinita. Tuttavia, se vuoi controllare il dimensionamento delle righe, utilizza la proprietà grid-auto-rows e le colonne grid-auto-columns.

Per creare tutte le righe implicite con una dimensione minima di 10em e una dimensione massima di auto:

.container {
    display: grid;
    grid-auto-rows: minmax(10em, auto);
}

Per creare colonne implicite con un pattern di tracce larghe da 100 px e 200 px. In questo caso, la prima colonna implicita sarà 100 px, la seconda 200 px, la terza 100 px e così via.

.container {
    display: grid;
    grid-auto-columns: 100px 200px;
}

Linee della griglia con nome

Può semplificare il posizionamento degli elementi in un layout se le linee hanno un nome anziché un numero. Puoi assegnare un nome a qualsiasi linea della griglia aggiungendo un nome a tua scelta tra parentesi quadre. Si possono aggiungere più nomi, separati da uno spazio all'interno delle stesse parentesi. Dopo aver assegnato un nome alle linee, puoi utilizzarle al posto dei numeri.

.container {
    display: grid;
    grid-template-columns:
      [main-start aside-start] 1fr
      [aside-end content-start] 2fr
      [content-end main-end]; /* a two column layout */
}

.sidebar {
    grid-column: aside-start / aside-end;
    /* placed between line 1 and 2*/
}

footer {
    grid-column: main-start / main-end;
    /* right across the layout from line 1 to line 3*/
}

Aree del modello di griglia

Puoi anche assegnare un nome alle aree della griglia e posizionare gli elementi su tali aree. Si tratta di un'ottima tecnica perché ti consente di vedere come appare il tuo componente direttamente nel CSS.

Per iniziare, assegna un nome ai elementi secondari diretti del contenitore della griglia utilizzando la proprietà grid-area:

header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

footer {
    grid-area: footer;
}

Il nome può essere qualsiasi cosa, ad eccezione delle parole chiave auto e span. Una volta denominati tutti gli elementi, utilizza la proprietà grid-template-areas per definire le celle della griglia a cui sarà applicato ogni elemento. Ogni riga è definita tra virgolette.

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas:
        "header header header header"
        "sidebar content content content"
        "sidebar footer footer footer";
}

Esistono alcune regole per l'utilizzo di grid-template-areas.

• Il valore deve essere una griglia completa senza celle vuote.
• Per applicare l'intervallo alle tracce, ripeti il nome.
• Le aree create ripetendo il nome devono essere rettangolari e non possono essere disconnesse.

Se violi una delle regole indicate sopra, il valore viene considerato non valido ed eliminato.

Per lasciare uno spazio bianco sulla griglia, utilizza uno o più . senza spazi vuoti. Ad esempio, per lasciare vuota la prima cella della griglia, potrei aggiungere una serie di . caratteri:

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas:
        "....... header header header"
        "sidebar content content content"
        "sidebar footer footer footer";
}

Poiché l'intero layout è definito in un'unica posizione, è facile ridefinire il layout utilizzando query supporti. Nel prossimo esempio ho creato un layout a due colonne che si sposta in tre colonne ridefinendo il valore di grid-template-columns e grid-template-areas. Apri l'esempio in una nuova finestra per giocare con le dimensioni dell'area visibile e vedere la modifica del layout.

Puoi anche vedere come la proprietà grid-template-areas è correlata a writing-mode e direzione, come con altri metodi della griglia.

Proprietà in forma abbreviata

Esistono due proprietà abbreviate che ti consentono di impostare molte delle proprietà della griglia in una sola volta. Queste possono sembrare un po' confusi, finché non ne spieghi esattamente come si combinano. Spetta a te decidere se vuoi utilizzarli o preferisci usare le mani lunghe.

grid-template

La proprietà grid-template è un'abbreviazione per grid-template-rows, grid-template-columns e grid-template-areas. Le righe vengono definite per prime, insieme al valore grid-template-areas. Le dimensioni delle colonne vengono aggiunte dopo un /.

.container {
    display: grid;
    grid-template:
      "head head head" minmax(150px, auto)
      "sidebar content content" auto
      "sidebar footer footer" auto / 1fr 1fr 1fr;
}

grid struttura

L'abbreviazione grid può essere utilizzata esattamente come l'abbreviazione grid-template. Se utilizzata in questo modo, reimposterà le altre proprietà della griglia che accetta ai valori iniziali. L'insieme completo è:

• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid-auto-rows
• grid-auto-columns
• grid-auto-flow

In alternativa, puoi utilizzare questa scorciatoia per definire il comportamento della griglia implicita, ad esempio:

.container {
    display: grid;
    grid: repeat(2, 80px) / auto-flow  120px;
}

Allineamento

Il layout a griglia utilizza le stesse proprietà di allineamento che hai visto nella guida a flexbox. Nella griglia, le proprietà che iniziano con justify- vengono sempre utilizzate sull'asse in linea, la direzione in cui vengono eseguite le frasi nella modalità di scrittura.

Le proprietà che iniziano con align- vengono utilizzate sull'asse dei blocchi, ovvero la direzione in cui i blocchi sono disposti nella modalità di scrittura.

• justify-content e align-content: distribuisci spazio aggiuntivo nel contenitore della griglia attorno o tra le tracce.
• justify-self e align-self: vengono applicati a un elemento della griglia per spostarlo all'interno dell'area della griglia in cui è posizionato.
• justify-items e align-items: vengono applicati al contenitore della griglia per impostare tutte le proprietà justify-self sugli elementi.

Distribuzione di spazio aggiuntivo

In questa demo la griglia è più grande dello spazio necessario per tracciare i binari a larghezza fissa. Ciò significa che abbiamo spazio sia nella dimensione in linea che in quella in blocco della griglia. Prova valori diversi di align-content e justify-content per vedere il comportamento delle tracce.

Nota come gli spazi vuoti diventano maggiori quando utilizzi valori come space-between e come ogni elemento della griglia che copra due tracce cresce anche per assorbire lo spazio aggiuntivo.

Spostamento di contenuti

Gli elementi con un colore di sfondo riempiono completamente l'area della griglia in cui sono posizionati, perché il valore iniziale di justify-self e align-self è stretch.

Nella demo, modifica i valori di justify-items e align-items per vedere come questo cambia il layout. Le dimensioni dell'area della griglia non cambiano, ma gli elementi vengono spostati all'interno dell'area definita.

Verifica la tua comprensione

Verifica le tue conoscenze sulla griglia

main {
  display: grid;
}

Risorse

Questa guida ti ha fornito una panoramica delle diverse parti della specifica del layout a griglia. Per saperne di più, dai un'occhiata alle seguenti risorse.

• Layout griglia MDN CSS
• Una guida completa alla griglia
• Creazione di un contenitore della griglia
• Esaminare la griglia CSS in Chrome DevTools
• Una raccolta completa di materiali didattici sulla griglia