Comprensione della griglia CSS: creazione di un contenitore di griglia

Questo è l'inizio di una nuova serie qui su Smashing Magazine incentrata sul layout della griglia CSS. Sebbene Grid sia disponibile nei browser dal 2017, molti sviluppatori non avranno ancora avuto la possibilità di utilizzarlo su un progetto. Sembra che ci siano molte nuove proprietà e valori associati a CSS Grid Layout. Questo può farlo sembrare opprimente. Tuttavia, molti dettagli sulle specifiche alternano modi di fare le cose, il che significa che non è necessario apprendere l'intera specifica per iniziare. Questa serie mira a portarti dal principiante della griglia all'esperto, con molti suggerimenti pratici sull'utilizzo lungo il percorso.

Questo articolo iniziale tratterà cosa succede quando crei un contenitore di griglia e le varie proprietà che puoi usare sull'elemento padre per controllare quella griglia. Scoprirai che esistono diversi casi d'uso che vengono soddisfatti solo con le proprietà che applichi al contenitore della griglia.

In questo articolo tratteremo:

• Creazione di un contenitore griglia con display: grid o display: inline-grid ,
• Impostazione di colonne e righe con grid-template-columns e grid-template-rows ,

• Controllo della dimensione delle tracce implicite con grid-auto-columns grid-auto-rows .

• Parte 1: creazione di un contenitore a griglia

• Parte 2: Linee della griglia

• Parte 3: Aree dei modelli di griglia

Creazione di un contenitore a griglia

Grid, come Flexbox, è un valore della proprietà display CSS. Pertanto per dire al browser che si desidera utilizzare il layout della griglia si utilizza display: grid . Fatto ciò, il browser ti darà una casella a livello di blocco sull'elemento con display: grid ed eventuali figli diretti inizieranno a partecipare a un contesto di formattazione della griglia . Ciò significa che si comportano come elementi della griglia, piuttosto che come normali elementi di blocco e inline.

Tuttavia, potresti non vedere immediatamente una differenza sulla tua pagina. Poiché non hai creato righe o colonne, hai una griglia a una colonna. Vengono generate abbastanza righe per contenere tutti i tuoi figli diretti e vengono visualizzate una dopo l'altra in quella singola colonna. Visivamente sembrano proprio come elementi di blocco.

Vedrai una differenza se hai una stringa di testo, non racchiusa in un elemento, e un figlio diretto del contenitore della griglia, poiché la stringa verrà racchiusa in un elemento anonimo e diventerà un elemento della griglia. Qualsiasi elemento che è normalmente un elemento inline, come un intervallo, diventerà anche un elemento della griglia una volta che il suo genitore è un contenitore della griglia.

L'esempio seguente ha due elementi a livello di blocco, più una stringa di testo con un intervallo nel mezzo della stringa. Finiamo con cinque elementi della griglia:

• I due elementi div ,
• La stringa di testo prima dell'intervallo,
• la campata,
• La stringa di testo dopo l'intervallo.

Se ispezioni la griglia utilizzando Firefox Grid Inspector, puoi vedere le tracce di cinque righe che sono state create per gli elementi.

Puoi anche creare una griglia inline usando display: inline-grid ; in questo caso, il tuo contenitore della griglia diventa una scatola a livello di linea. Tuttavia, i figli diretti sono ancora elementi della griglia e si comportano allo stesso modo degli elementi della griglia all'interno di una casella a livello di blocco (è solo il tipo di visualizzazione esterno). Questo è il motivo per cui il contenitore della griglia si comporta come sopra quando è accanto ad altre caselle nella pagina.

Il prossimo esempio ha una griglia seguita da una stringa di testo, poiché si tratta di una griglia a livello di linea, il testo può essere visualizzato accanto ad essa. Le cose a livello inline non si estendono per occupare tutto lo spazio nella dimensione inline nel modo in cui lo fanno le cose a livello di blocco.

Nota : in futuro, saremo in grado di descrivere meglio il nostro layout utilizzando display: block grid per creare il nostro contenitore a livello di blocco e display: inline grid per creare un contenitore a livello di linea. Puoi leggere questa modifica alle specifiche di visualizzazione nel mio articolo, "Scavo nella proprietà di visualizzazione: i due valori di visualizzazione".

Colonne E Righe

Per ottenere qualcosa che assomigli a una griglia, dovremo aggiungere colonne e righe. Questi vengono creati utilizzando le proprietà grid-template-columns e grid-template-rows . Queste proprietà sono definite nelle specifiche come accettazione di un valore chiamato track-list .

Queste proprietà specificano, come una track list separata da spazi, i nomi delle linee e le funzioni di dimensionamento delle tracce della griglia. La proprietà grid-template-columns specifica l'elenco tracce per le colonne della griglia, mentre grid-template-rows specifica l'elenco tracce per le righe della griglia.

Alcuni valori validi della tracklist sono i seguenti:

Come puoi vedere ci sono molti modi per creare una tracklist! Diamo un'occhiata a come funzionano esattamente tutti questi, con alcuni suggerimenti in termini di perché potresti usarli.

Utilizzo delle unità di lunghezza

Puoi utilizzare qualsiasi unità di lunghezza o una percentuale per creare le tue tracce. Se la dimensione delle tracce è inferiore a quella disponibile nel contenitore della griglia, per impostazione predefinita le tracce si allineeranno all'inizio del contenitore e lo spazio libero andrà alla fine. Questo perché il valore predefinito di align-content e justify-content è start . Puoi distanziare le tracce della griglia o spostarle alla fine del contenitore utilizzando le proprietà di allineamento, che spiego in dettaglio nel mio articolo "Come allineare le cose in CSS".

Puoi anche utilizzare le parole chiave min-content , max-content e fit-content() . L'utilizzo min-content ti darà una traccia il più piccola possibile senza causare overflow. Pertanto, se utilizzato come dimensione di una colonna, il contenuto si avvolgerà dolcemente ove possibile. La traccia diventa la dimensione della parola più lunga nella colonna o dell'elemento più grande a dimensione fissa.

L'utilizzo max-content farà sì che il contenuto non esegua alcun soft-wrapping. In una colonna, qualsiasi stringa di testo verrà annullata, il che potrebbe causare un overflow.

La parola chiave fit-content può essere utilizzata solo passando un valore. Quel valore diventa il massimo a cui crescerà questa traccia. Pertanto, la traccia si comporterà come max-content con il contenuto che si apre e si allunga fino a raggiungere il valore che hai passato. A quel punto, inizierà a avvolgersi normalmente. Quindi la tua traccia potrebbe essere più piccola del valore che trasmetti, ma mai più grande.

Puoi scoprire di più sul dimensionamento in Griglia e altri metodi di layout nel mio articolo "Quanto è grande quella scatola? Capire il dimensionamento nel layout CSS”.

Se ti ritrovi con tracce che occupano più spazio di quello che hai nel tuo contenitore, traboccheranno. Se usi le percentuali, come con i layout float o flex basati su percentuale, dovrai fare attenzione che la percentuale totale non sia superiore al 100% se vuoi evitare l'overflow.

L'Unità fr

Grid Layout include un metodo che può farti risparmiare il calcolo delle percentuali per te stesso: traccia il dimensionamento con l'unità fr . Questa unità non è una lunghezza e quindi non può essere combinata con calc() ; è un'unità flessibile e rappresenta lo spazio disponibile nel contenitore della griglia.

Ciò significa che con una track-list di 1fr 1fr 1fr ; lo spazio disponibile è diviso in tre e ripartito equamente tra i binari. Con una track-list di 2fr 1fr 1fr , lo spazio disponibile è diviso in quattro e due parti sono date per tracciare una: una parte ciascuna per le tracce due e tre.

Qualcosa a cui prestare attenzione è che ciò che viene condiviso per impostazione predefinita è lo spazio disponibile che non è lo spazio totale nel contenitore. Se una qualsiasi delle tue tracce contiene un elemento di dimensioni fisse o una parola lunga che non può essere a capo, questo verrà disposto prima che lo spazio venga condiviso.

Nel prossimo esempio, ho rimosso gli spazi tra le parole di ItemThree . Ciò ha creato una lunga stringa indistruttibile in modo che la distribuzione dello spazio avvenga dopo che il layout di quell'elemento è stato contabilizzato.

Puoi mixare l'unità fr con tracce di lunghezza fissa, ed è qui che diventa molto utile. Ad esempio, potresti avere un componente con due colonne di dimensioni fisse e un'area centrale che si estende:

Puoi avere un componente con una traccia impostata su fit-content(300px) e l'altra su 1fr. Questo crea un componente che può avere qualcosa di più piccolo di 300px nella prima traccia, nel qual caso occupa solo lo spazio necessario e l'unità fr si espande per occupare il resto dello spazio.

Se aggiungi qualcosa di più grande (come un'immagine con max-width: 100% ), la prima traccia smetterà di crescere a 300px e l'unità fr occupa il resto dello spazio. Mescolare l'unità fr con il fit-content è un modo per creare componenti molto flessibili per il tuo sito.

La funzione repeat()

L'uso di repeat() nella tua tracklist può salvare la digitazione dello stesso valore o valori più e più volte. Ad esempio le due righe seguenti sono le stesse:

 grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-columns: repeat(12, 1fr);

Quando si usa repeat() il valore prima della virgola è il numero di volte per ripetere la track-list che segue la virgola. Quella track-list può avere più valori. Ciò significa che puoi ripetere uno schema di tracce.

Puoi usare la funzione repeat() per una parte di una track-list. Ad esempio, la riga seguente ti darà una traccia da 1fr, 3 tracce da 200px e una traccia finale da 1fr.

 grid-template-columns: 1fr repeat(3,200px) 1fr

Oltre a un numero prima della virgola per indicare un numero fisso di volte per ripetere lo schema, puoi anche utilizzare le parole chiave auto-fill auto-fit . L'utilizzo di una di queste parole chiave significa che invece di un numero fisso di tracce, il contenitore della griglia verrà riempito con tutte le tracce che si adattano.

L'uso di un'unità di lunghezza fissa significa che, a meno che il contenitore non sia in grado di essere diviso esattamente per quella dimensione, ti ritroverai con un po' di spazio libero rimanente. Nell'esempio sopra il mio contenitore è largo 500 px, quindi ottengo due tracce da 200 px più spazio alla fine.

Possiamo usare un'altra funzione di griglia per rendere il valore minimo, con lo spazio libero distribuito su tutte le tracce. La funzione minmax() richiede una dimensione minima e una massima. Con un minimo di 200px e un massimo di 1fr, otteniamo tutte le tracce di 200px che si adattano e poiché il massimo è 1fr, che già sappiamo dividerà lo spazio in modo uniforme, l'extra viene distribuito tra le tracce.

Ho menzionato che ci sono due possibili parole chiave: auto-fill auto-fit . Se hai abbastanza contenuto per riempire la prima riga di celle, queste si comporteranno esattamente allo stesso modo. Se, tuttavia, non lo fai (ad esempio se rimuoviamo tutti gli elementi tranne uno all'interno del contenitore sopra), allora si comportano in modo diverso.

L'uso auto-fill manterrà le dimensioni della traccia disponibili anche se non ci sono contenuti in cui entrare.

Se, invece, usi auto-fit , le tracce vuote verranno compresse:

Utilizzando Firefox Grid Inspector, puoi vedere che le tracce sono ancora lì, ma sono state compresse a zero. La linea di fondo della nostra griglia è ancora la linea 3 in quanto possiamo inserire due tracce.

Linee con nome

Il mio ultimo esempio sopra ha utilizzato l'approccio delle linee con nome. Quando si utilizza Griglia. hai sempre i numeri di riga, tuttavia puoi anche nominare le righe. Le linee sono denominate tra parentesi quadre. Puoi avere più nomi per una riga; in tal caso, uno spazio li separa. Ad esempio, nella seguente tracklist, tutte le mie righe hanno due nomi.

 grid-template-columns: [main-start sidebar-start] 1fr [sidebar-end content-start] 4fr [content-end main-end]

Puoi nominare le tue righe come preferisci, tranne la parola span in quanto è una parola riservata poiché viene utilizzata quando si posizionano gli elementi sulla griglia.

Nota : nel prossimo articolo di questa serie, parlerò di più del posizionamento basato su riga e di come vengono utilizzate le righe con nome. Nel frattempo, leggi il mio articolo su "Nominare le cose nel layout della griglia CSS" per aiutarti a saperne di più sull'argomento.

La griglia esplicita contro la griglia implicita

Quando si crea una griglia utilizzando grid-template-columns grid-template-rows con un elenco tracce, si crea quella che viene definita griglia esplicita . Questa è la griglia che hai definito che ha le dimensioni che hai scelto per ogni traccia.

Se hai più elementi di quelli che possono rientrare, o posizioni un elemento in modo che cada al di fuori dei limiti della griglia che hai creato, Grid creerà tracce nella griglia implicita . Queste tracce implicite verranno ridimensionate automaticamente per impostazione predefinita. Abbiamo visto questa griglia implicita in azione quando ho dichiarato display: grid sull'elemento genitore e righe create dalla griglia, una per ogni elemento. Non ho definito queste righe, ma poiché c'erano elementi della griglia, le tracce di riga sono state create per dare loro un posto dove andare.

È possibile impostare una dimensione per righe o colonne implicite usando le proprietà grid-auto-rows o grid-auto-columns . Queste proprietà richiedono un elenco di tracce, quindi se desideri che tutte le colonne implicite siano alte almeno 200 pixel ma crescano se sono presenti più contenuti, puoi utilizzare quanto segue:

 grid-auto-rows: minmax(200px, auto)

Se si desidera che la prima riga implicita venga ridimensionata automaticamente e la seconda abbia dimensioni min-content e così via (fino a quando tutti gli elementi della griglia non sono stati adattati), è possibile passare più valori:

grid-auto-rows: auto 100px

Utilizzo di una griglia con posizionamento automatico

Creare una griglia (e consentire al browser di posizionare automaticamente gli elementi) ti fa fare molta strada in termini di schemi utili che puoi ottenere. Non abbiamo ancora esaminato il posizionamento degli elementi sulla griglia, ma molti layout che utilizzano la griglia non eseguono alcun posizionamento. Si basano semplicemente sul posizionamento degli articoli nell'ordine di origine, uno in ciascuna cella della griglia.

Se non conosci CSS Grid, giocare con tracce di dimensioni diverse e vedere come gli elementi si posizionano nelle celle che crei è un ottimo modo per iniziare.

• Parte 1: creazione di un contenitore a griglia
• Parte 2: Linee della griglia
• Parte 3: Aree dei modelli di griglia