Grid

Podcast CSS - 011: Griglia .

Un layout molto comune nel web design è il layout dell'intestazione, della barra laterale, del corpo e del piè di pagina.

Nel corso degli anni, esistono molti metodi per risolvere questo layout, ma con la griglia CSS non solo è relativamente semplice, ma hai molte opzioni. La griglia è eccezionalmente utile per combinare il controllo il dimensionamento estrinseco offre la flessibilità del dimensionamento intrinseco, il che lo rende ideale per questo tipo di layout. Questo perché la griglia è un metodo di layout progettato per contenuti bidimensionali. Ciò significa che gli elementi sono disposti in righe e colonne contemporaneamente.

Quando crei un layout a griglia, definisci una griglia con righe e colonne. Quindi collochi gli elementi nella griglia o consentire al browser di posizionarle automaticamente nelle celle che hai creato. Ci sono molti elementi da grigliare, ma con una panoramica di ciò che è disponibile creerai layout a griglia in pochissimo tempo.

Panoramica

Quindi, cosa puoi fare con la griglia? I layout a griglia hanno le seguenti funzionalità. In questa guida scoprirai tutti questi strumenti.

1. Una griglia può essere definita con righe e colonne. Puoi scegliere come dimensionare queste tracce di righe e colonne o come reagire alle dimensioni dei contenuti.
2. Gli elementi secondari 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 della griglia per facilitarne 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 della griglia

La griglia è caratterizzata da una grande varietà di terminologia, perché è la prima volta che CSS utilizza un vero e proprio sistema di layout.

Linee della griglia

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

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

Binari a griglia

Una rotta è lo spazio tra due linee della griglia. Una traccia riga è compresa 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 in una griglia definita dall'intersezione dei percorsi di riga e colonna. È proprio come una cella di tabella o una cella di un foglio di lavoro. Se definisci una griglia e non posizioni nessuno degli elementi verranno automaticamente disposti un elemento in ogni cella della griglia definita.

Area griglia

Più celle della griglia insieme. Le aree della griglia vengono create facendo abbracciare un elemento su più tracce.

Spazi vuoti

Una grondaia o un vicolo tra i binari. Ai fini delle dimensioni, queste tracce sono come una normale traccia. Non puoi inserire contenuti in uno spazio vuoto, ma puoi estenderli agli elementi della griglia.

Contenitore griglia

L'elemento HTML a cui è applicato display: grid, e di conseguenza crea 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, come mostrato di seguito.

.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 tracce colonne. Ogni traccia utilizza un'unità di lunghezza diversa. Ha due tracce di riga, una usando un'unità di lunghezza e l'altra automaticamente. Quando vengono utilizzati come strumenti automatici per il dimensionamento delle tracce, possono essere considerati grandi quanto i contenuti. Le tracce vengono ridimensionate automaticamente per impostazione predefinita.

Se l'elemento con una classe .container ha elementi secondari, verranno subito visualizzate su questa griglia. Puoi vedere come funziona nella demo qui sotto.

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

Apri la demo in Chrome. Controlla l'elemento con lo sfondo grigio, che ha un ID container. Evidenzia la griglia selezionando il relativo badge nel DOM, accanto all'elemento .container. Nella scheda Layout, Seleziona Visualizza numeri di riga nel menu a discesa per visualizzare i numeri delle righe nella griglia.

Parole chiave relative alle dimensioni intrinseche

Oltre alle dimensioni di lunghezza e percentuale, come descritto nella sezione unità di misura, Le tracce della griglia possono utilizzare parole chiave di dimensionamento intrinseco. Queste parole chiave sono definite nella specifica delle dimensioni dei riquadri e aggiungere altri metodi per il dimensionamento delle caselle in CSS, non solo alle griglie.

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

La min-content ridurrà il più possibile le dimensioni della traccia senza che i contenuti superino l'elenco. Modifica del layout della griglia di esempio in modo da avere tre tracce di colonne tutte con dimensione min-content restringe quanto la parola più lunga della traccia.

La max-content ha l'effetto opposto. La traccia diventerà sufficientemente larga per consentire la visualizzazione di tutti i contenuti in un'unica lunga stringa ininterrotta. Questa operazione potrebbe causare degli overflow perché la stringa non andrà a capo.

La fit-content() all'inizio è simile a max-content. Tuttavia, una volta che la traccia raggiunge le dimensioni passate nella funzione, il contenuto inizia ad aggregarsi. fit-content(10em) creerà una traccia inferiore a 10 em, se la dimensione di max-content è inferiore a 10 em, ma mai più grandi di 10 em.

Nella prossima demo, prova le diverse parole chiave intrinseche relative al dimensionamento modificando il ridimensionamento dei canali della griglia.

L'unità fr

Esistono dimensioni di lunghezza, percentuali e anche queste nuove parole chiave. Esiste anche uno speciale metodo 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 aver steso gli elementi. Pertanto, avere tre colonne che abbiano tutte la stessa quota di spazio disponibile:

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

Quando l'unità fr condivide lo spazio disponibile, può essere combinato con un divario di dimensioni fisse o con tracce di dimensioni fisse. Per avere un componente con un elemento di dimensione fissa e la seconda traccia che occupa lo spazio rimanente, che 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 maggiori e maggiore spazio libero. Nella demo riportata di seguito, modifica il valore della terza traccia.

La funzione minmax()

Questa funzione significa che puoi impostare le dimensioni minime e massime di una traccia. Questo può essere molto utile. Prendiamo l'esempio dell'unità fr sopra che distribuisce lo spazio rimanente, potrebbe essere scritto utilizzando minmax() sotto forma di minmax(auto, 1fr). La griglia esamina le dimensioni intrinseche dei contenuti, distribuisce lo spazio disponibile dopo aver concesso abbastanza spazio ai contenuti. Ciò significa che potresti non visualizzare tracce con la stessa quota di condivisione di tutto lo spazio disponibile nel contenitore della griglia.

Per forzare un percorso a prendere una quota uguale dello spazio nel contenitore della griglia meno gli spazi vuoti, utilizza minmax. Sostituisci 1fr come dimensione della traccia con minmax(0, 1fr). In questo modo le dimensioni minime della traccia sono pari a 0 e non le dimensioni minime dei contenuti. La griglia quindi prenderà tutte le dimensioni disponibili nel container, a detrarre la dimensione necessaria per colmare eventuali lacune, e condividi il resto in base alle tue unità fr.

Notazione repeat()

Se vuoi creare una griglia a 12 colonne con colonne uguali, puoi usare 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 imparato sul dimensionamento dei canali, minmax() e ripeti, per creare un pattern utile con il layout a griglia. Se preferisci non specificare il numero di tracce di colonna, ma di crearne tutti quelli che si adattano al tuo container.

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

Nella demo abbiamo il numero di tracce che possiamo. Le tracce, tuttavia, non sono flessibili. Avrai un intervallo alla fine finché non ci sarà abbastanza spazio 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 quindi traccia le tracce da 200 pixel e lo spazio rimanente viene distribuito equamente tra queste tracce.

Questo crea un layout adattabile bidimensionale senza bisogno di query multimediali.

C'è una sottile differenza tra auto-fill e auto-fit. Nella prossima demo, gioca con un layout a griglia usando la sintassi descritta sopra, ma con solo due elementi della griglia nel contenitore della griglia. Con la parola chiave auto-fill puoi verificare che sono state create tracce vuote. Imposta la parola chiave su auto-fit e le tracce vengono compresse fino a 0 dimensioni. Ciò significa che le tracce flessibili ora crescono fino a occupare spazio.

In caso contrario, le parole chiave auto-fill e auto-fit agiscono nello stesso modo. Non c'è differenza tra loro una volta riempita la prima traccia.

Posizionamento automatico

Hai già visto il posizionamento automatico della griglia nelle demo finora. Gli elementi vengono posizionati nella griglia uno per cella nell'ordine in cui appaiono nell'origine. Per molti layout potrebbe essere tutto quello di cui hai bisogno. Se hai bisogno di un maggiore controllo, ci sono un paio di cose che ti potrebbero piacere fare. La prima consiste nel modificare il layout del posizionamento automatico.

Posizionamento di elementi nelle colonne

Per impostazione predefinita, il layout a griglia prevede il posizionamento degli elementi lungo le righe. Puoi invece inserire gli elementi nelle colonne utilizzando grid-auto-flow: column. Devi definire le tracce per le righe, altrimenti gli elementi creeranno tracce intrinseche delle colonne. e layout, il tutto in una lunga riga.

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

Tracce di duplicazione

Puoi fare in modo che alcuni o tutti gli elementi in un layout posizionato automaticamente si applichino a più di una traccia. Utilizza la parola chiave span più il numero di righe da coprire 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, utilizza 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 su più tracce potrebbe generare una griglia con alcune celle vuote. Il comportamento predefinito del layout a griglia con layout completamente automatico è progredire sempre in avanti. Gli articoli verranno posizionati in base all'ordine in cui sono presenti nell'origine, o qualsiasi modifica apportata alla proprietà order. Se non c'è abbastanza spazio per un elemento, la griglia lascia uno spazio vuoto e si passa alla traccia successiva.

La demo successiva mostra questo comportamento. La casella di controllo applicherà la modalità di compressione densa. Questa operazione viene attivata assegnando a grid-auto-flow il valore dense. Con questo valore, prenderà gli elementi in un secondo momento nel layout e li userà per riempire gli spazi vuoti. Ciò potrebbe significare che il display si disconnette dall'ordine logico.

Posizionamento degli elementi

Hai già molte funzionalità di CSS Grid. Vediamo ora come posizioniamo gli elementi nella griglia creata.

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

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

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

Sono disponibili delle scorciatoie che ti consentono di impostare contemporaneamente le linee di inizio e di fine:

• grid-column
• grid-row

Per posizionare l'elemento, imposta le linee iniziali e finali 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ò fornire una guida visiva alle righe per controllare dove si trova l'elemento.

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

Sovrapposizione di elementi

Utilizzando il posizionamento basato sulle linee, puoi inserire elementi nella stessa cella della griglia. Ciò significa che puoi sovrapporre elementi, o che un elemento si sovrapponga parzialmente a un altro. Gli elementi inclusi in un secondo momento 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 a cui hai dato una dimensione per le tracce.

A volte potresti visualizzare elementi al di fuori di questa griglia esplicita. Ad esempio: puoi definire le tracce delle colonne e poi aggiungere diverse righe di elementi della griglia senza mai definire le tracce delle righe. Le tracce vengono ridimensionate automaticamente per impostazione predefinita. Potresti anche posizionare un elemento utilizzando grid-column-end che non rientra nella griglia esplicita definita. In entrambi i casi, la griglia creerà tracce per far funzionare il layout, e queste tracce vengono chiamate griglia implicita.

Nella maggior parte dei casi non ci sarà alcuna differenza se lavori con una griglia implicita o esplicita. Tuttavia, con il posizionamento basato sulle linee, potresti riscontrare la differenza principale tra i due.

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

Questo vale solo per la griglia esplicita. Crea un layout di tre righe di elementi posizionati automaticamente in cui vorresti che il primo elemento si estendesse fino alla riga finale della griglia.

Potresti pensare di poter assegnare grid-row: 1 / -1 all'elemento. Nella demo qui sotto puoi vedere che non funziona. Le tracce vengono create nella griglia implicita non c'è modo di raggiungere la fine della griglia utilizzando -1.

Dimensionamento delle tracce implicite

Le tracce create nella griglia implicita verranno ridimensionate automaticamente per impostazione predefinita. Tuttavia, se vuoi controllare il ridimensionamento delle righe, utilizza la proprietà grid-auto-rows, e per 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 uno schema di tracce larghe 100 px e 200 px. In questo caso, la prima colonna implicita sarà di 100 px il secondo 200 px, il terzo 100px 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 righe hanno un nome anziché un numero. Puoi assegnare un nome a qualsiasi linea della griglia aggiungendo un nome a tua scelta tra parentesi quadre. È possibile aggiungere più nomi, separate 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 griglia

Puoi anche assegnare un nome ad aree della griglia e posizionare elementi in quelle aree denominate. Si tratta di una tecnica molto utile, in quanto consente di vedere l'aspetto del componente direttamente nel CSS.

Per iniziare, assegna un nome agli elementi secondari diretti del container della griglia utilizzando 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 tu voglia ad eccezione delle parole chiave auto e span. Dopo aver assegnato un nome a tutti gli elementi, utilizza la grid-template-areas per definire le celle della griglia distribuite da ciascun 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 da seguire quando utilizzi grid-template-areas.

• Il valore deve essere una griglia completa senza celle vuote.
• Per coprire più tracce, ripeti il nome.
• Le aree create ripetendo il nome devono essere rettangolari e non possono essere disconnesse.

Se violi una qualsiasi delle regole precedenti, il valore viene considerato non valido e gettato via.

Per lasciare uno spazio bianco nella griglia, utilizza uno o più . senza spazi bianchi tra loro. 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 unico posto, semplifica la ridefinizione del layout utilizzando le query supporti. Nel prossimo esempio ho creato un layout a due colonne che si sposta in tre colonne definendo il valore di grid-template-columns e grid-template-areas. Apri l'esempio in una nuova finestra per sperimentare 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 a griglia.

Proprietà abbreviate

Esistono due proprietà abbreviate che ti consentono di impostare molte delle proprietà della griglia contemporaneamente. Questi possono sembrare un po' confusi fino a quando non si analizzano in dettaglio come funzionano. Sta a te scegliere se usarli o preferisci usare le mani lunghe.

grid-template

La grid-template è un'abbreviazione di 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 /.

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

grid struttura

La grid la forma breve può essere utilizzata esattamente allo stesso modo dell'abbreviazione grid-template. Se utilizzata in questo modo, verranno reimpostate le altre proprietà della griglia accettate sui valori iniziali. Il set completo è:

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

In alternativa, puoi utilizzare questa forma abbreviata 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 descritte nella guida. flexbox. Nella griglia, le proprietà che iniziano con justify- vengono sempre utilizzate sull'asse in linea. la direzione in cui corrono le frasi nel tuo modo di scrittura.

Le proprietà che iniziano con align- vengono utilizzate nell'asse del blocco la direzione in cui vengono mostrati i blocchi nella tua modalità di scrittura.

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

Distribuzione di spazio aggiuntivo

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

Nota come i vuoti diventano più ampi quando utilizzi valori come space-between, e anche qualsiasi elemento della griglia che comprende due tracce cresce per assorbire lo spazio aggiuntivo aggiunto allo spazio.

Spostamento dei 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 modifica il layout. Le dimensioni dell'area della griglia non cambiano, vengono spostati all'interno dell'area definita.

Verifica le tue conoscenze

Verifica le tue conoscenze sulla griglia

main {
  display: grid;
}

Risorse

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

• Layout della griglia CSS MDN
• Una guida completa alla griglia
• Creazione di un container della griglia
• Ispezionare la griglia CSS in Chrome DevTools
• Una raccolta completa di materiali di apprendimento a griglia