Grid

The CSS Podcast - 011: Grid

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

Nel corso degli anni sono stati sviluppati molti metodi per risolvere questo problema di layout, ma con la griglia CSS non solo è relativamente semplice, ma hai a disposizione molte opzioni. La griglia è eccezionalmente utile per combinare il controllo fornito dalle dimensioni estrinseche con la flessibilità delle dimensioni intrinseche, il che la rende ideale per questo tipo di layout. Questo perché la griglia è un metodo di layout progettato per contenuti bidimensionali. In altre parole, disporre gli elementi in righe e colonne contemporaneamente.

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 che hai creato. Le griglie offrono molte opzioni, ma con una panoramica di ciò che è disponibile, potrai creare layout di griglie in pochissimo tempo.

Panoramica

Che cosa puoi fare con la griglia? I layout a griglia hanno le seguenti funzionalità. Scoprirai tutto in questa guida.

1. Una griglia può essere definita con righe e colonne. Puoi scegliere le dimensioni di questi canali di righe e colonne oppure possono adattarsi 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. Le linee e le aree della griglia possono essere denominate per semplificare il posizionamento.
5. Lo spazio inutilizzato nel contenitore della griglia può essere distribuito tra i canali.
6. Gli elementi della griglia possono essere allineati all'interno della loro area.

Terminologia della griglia

Grid è accompagnata da una serie di nuova terminologia, in quanto è la prima volta che il CSS ha un vero sistema di layout.

Linee della griglia

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

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

Tracce della griglia

Una traccia è lo spazio tra due linee della griglia. Un canale riga si trova tra due linee di riga e un canale colonna tra due linee di colonna. Quando creiamo la griglia, creiamo questi canali assegnandoli a una dimensione.

Cella della griglia

Una cella della griglia è lo spazio più piccolo in una griglia definito dall'intersezione dei canali di riga e colonna. È come una cella di una tabella o una cella di un foglio di lavoro. Se definisci una griglia e non inserisci alcun elemento, viene inserito automaticamente un elemento in ogni cella della griglia definita.

Area della griglia

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

Lacune

Una canalina o un vicolo tra i binari. Ai fini della determinazione delle dimensioni, si comportano come un canale normale. Non puoi inserire contenuti in uno spazio vuoto, ma puoi estendere gli elementi della griglia su più righe.

Contenitore della griglia

L'elemento HTML a cui è stato applicato display: grid, e quindi 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 canali di colonna, due canali di riga e uno spazio di 10 pixel tra i canali come segue.

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

Questa griglia mostra molti degli elementi descritti nella sezione Terminologia. Ha tre tracce di colonne. Ogni traccia utilizza un'unità di misura della lunghezza diversa. Ha due tracce di riga, una che utilizza un'unità di misura della lunghezza e l'altra automatica. Se utilizzata come dimensione automatica della traccia, può essere considerata grande quanto i contenuti. Le tracce vengono ridimensionate automaticamente per impostazione predefinita.

Se l'elemento con una classe .container contiene elementi secondari, vengono visualizzati immediatamente in questa griglia. Puoi vedere come funziona nella demo di seguito.

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 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 Mostra numeri di riga nel menu a discesa per visualizzare i numeri di riga nella griglia.

Una griglia evidenziata in Chrome DevTools che mostra numeri di riga, celle e canali.

Parole chiave per le dimensioni intrinseche

Oltre alle dimensioni di lunghezza e percentuale descritte nella sezione relativa alle unità di misura, i canali della griglia possono utilizzare parole chiave di dimensionamento intrinseche. Queste parole chiave sono definite nella specifica relativa alle dimensioni delle caselle e aggiungono metodi aggiuntivi per le dimensioni delle caselle in CSS, non solo per le tracce della griglia.

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

La parola chiave min-content renderà una traccia il più piccola possibile senza che i contenuti della traccia fuoriescano. Se modifichi il layout della griglia di esempio in modo da avere tre tracce di colonne tutte con dimensioni min-content, queste diventeranno strette quanto la parola più lunga della traccia.

La parola chiave max-content ha l'effetto opposto. La traccia diventerà abbastanza larga da consentire la visualizzazione di tutti i contenuti in una lunga stringa ininterrotta. Ciò potrebbe causare overflow perché la stringa non verrà a capo.

La funzione fit-content() all'inizio si comporta come max-content. Tuttavia, quando la traccia raggiunge le dimensioni che hai passato alla funzione, i contenuti iniziano a essere a capo. Pertanto, fit-content(10em) creerà una traccia inferiore a 10 em se le dimensioni di fit-content(10em) sono inferiori a 10 em, ma mai superiori a 10 em.max-content

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

Nota: in questa demo potresti notare che quando viene utilizzato il valore auto, le colonne della griglia si estendono per riempire il contenitore. Per impostazione predefinita, le tracce con dimensioni automatiche vengono allungate se è presente spazio aggiuntivo nel contenitore della griglia.

L'unità fr

Esistono già dimensioni relative alla lunghezza, percentuali e anche queste nuove parole chiave. Esiste anche un metodo di dimensionamento speciale che funziona solo nel layout a griglia. Si tratta dell'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 che gli elementi sono stati disposti. Pertanto, per avere tre colonne che ricevono tutte la stessa parte di spazio disponibile:

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

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

L'utilizzo di valori diversi per l'unità fr consente di condividere lo spazio in proporzione. I valori più elevati consentono di utilizzare una maggiore quantità di spazio libero. Nella demo di seguito, modifica il valore della terza traccia.

La funzione minmax()

Browser Support

• 57
• 16
• 52
• 10.1

Source

Questa funzione ti consente di impostare una dimensione minima e una massima per una traccia. Questo può essere molto utile. Se prendiamo l'esempio dell'unità fr sopra che distribuisce lo spazio rimanente, potrebbe essere scritta utilizzando minmax() come minmax(auto, 1fr). La griglia prende in considerazione le dimensioni intrinseche dei contenuti, quindi distribuisce lo spazio disponibile dopo aver dato ai contenuti spazio sufficiente. Ciò significa che potresti non ottenere tracce con una quota uguale 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 spazi, utilizza minmax. Sostituisci 1fr come dimensione della traccia con minmax(0, 1fr). In questo modo, la dimensione minima della traccia sarà 0 e non la dimensione minima dei contenuti. La griglia prenderà quindi tutte le dimensioni disponibili nel contenitore, detrarrà le dimensioni necessarie per eventuali spazi vuoti e condividerà il resto in base alle unità fr.

Notazione repeat()

Browser Support

• 57
• 16
• 76
• 10.1

Source

Se vuoi creare una griglia di canali con 12 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 della traccia. Ad esempio, puoi ripetere un pattern di tracce. Puoi anche avere alcune tracce normali e una sezione ripetuta.

.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 sulle dimensioni dei canali, minmax() e ripetere, per creare un pattern utile con il layout a griglia. Forse non vuoi specificare il numero di tracce di colonne, ma vuoi crearne quante ne possono stare nel contenitore.

Puoi farlo con repeat() e le parole chiave auto-fill o auto-fit. Nella demo seguente, la griglia creerà tutti i canali da 200 pixel che possono essere inseriti nel contenitore. Apri la demo in una nuova finestra e osserva come cambia la griglia quando modifichi le dimensioni dell'area visibile.

Nella demo vengono inseriti tutti i canali che si adattano. Tuttavia, i canali non sono flessibili. Verrà visualizzato uno spazio alla fine finché non sarà disponibile spazio sufficiente per un'altra traccia di 200 pixel. Se aggiungi la funzione minmax(), puoi richiedere tutte le tracce che si adattano con una dimensione minima di 200 pixel e una massima di 1 frazione. La griglia dispone quindi le tracce di 200 pixel e lo spazio rimanente viene distribuito equamente tra queste.

In questo modo viene creato un layout adattabile bidimensionale senza la necessità di utilizzare query sui media.

Esiste una lieve differenza tra auto-fill e auto-fit. Nella demo successiva, prova a utilizzare un layout a griglia con la sintassi spiegata sopra, ma con solo due elementi della griglia nel contenitore della griglia. Utilizzando la parola chiave auto-fill puoi vedere che sono stati creati canali vuoti. Modifica la parola chiave in auto-fit e le tracce si riducono a dimensioni pari a 0. Ciò significa che ora i canali flessibili si espandono per occupare lo spazio.

Le parole chiave auto-fill e auto-fit funzionano esattamente allo stesso modo. Non c'è differenza tra i due una volta completato il primo canale.

Posizionamento automatico

Finora hai già visto il posizionamento automatico della griglia nelle demo. Gli elementi vengono inseriti nella griglia uno per cella nell'ordine in cui appaiono nell'origine. Per molti layout, questo potrebbe essere tutto ciò di cui hai bisogno. Se hai bisogno di un maggiore controllo, puoi fare un paio di cose. La prima è modificare il layout del posizionamento automatico.

Posizionare gli elementi nelle colonne

Il comportamento predefinito del layout a griglia è posizionare gli elementi lungo le righe. In alternativa, puoi posizionare gli elementi nelle colonne utilizzando grid-auto-flow: column. Devi definire i canali di riga, altrimenti gli elementi creeranno canali di colonna intrinseci e il layout verrà visualizzato in una lunga riga.

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

Canali che si estendono

Puoi fare in modo che alcuni o tutti gli elementi di un layout posizionato automaticamente occupino più di un canale. 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 grid-column-start, viene utilizzato il valore iniziale di auto e l'elemento viene posizionato in base alle regole di posizionamento automatico. Puoi specificare la stessa cosa anche utilizzando la rappresentazione abbreviata grid-column:

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

Colmare le lacune

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

La demo successiva mostra questo comportamento. La casella di controllo applicherà la modalità di imballaggio compatto. Questa opzione viene attivata assegnando a grid-auto-flow un valore di dense. Con questo valore, la griglia inserirà gli elementi più avanti nel layout e li utilizzerà per riempire gli spazi vuoti. Ciò potrebbe significare che la visualizzazione viene disconnessa dall'ordine logico.

Posizionare gli articoli

CSS Grid offre già molte funzionalità. Ora vediamo come posizionare gli elementi nella griglia che abbiamo creato.

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

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

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

Sono disponibili delle abbreviazioni che consentono di impostare contemporaneamente le righe di inizio e di fine:

• grid-column
• grid-row

Per posizionare l'elemento, imposta le righe iniziale e finale dell'area della griglia in cui deve essere inserito.

.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 alle linee per controllare dove è posizionato l'elemento.

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

Impilare gli elementi

Con il posizionamento basato su riga puoi inserire gli elementi nella stessa cella della griglia. Ciò significa che puoi impilare gli elementi o sovrapporre parzialmente un elemento a un altro. Gli elementi che si trovano più avanti nell'origine verranno visualizzati sopra quelli precedenti. Puoi modificare questo ordine di sovrapposizione utilizzando z-index, come per gli elementi posizionati.

Numeri di riga negativi

Quando crei una griglia utilizzando grid-template-rows e grid-template-columns, crei quella che viene chiamata griglia esplicita. Si tratta di una griglia che hai definito e a cui hai assegnato le dimensioni dei canali.

A volte, alcuni elementi vengono visualizzati al di fuori di questa griglia esplicita. Ad esempio, puoi definire tracce di colonne e poi aggiungere diverse righe di elementi della griglia senza mai definire tracce di riga. Le tracce verranno ridimensionate automaticamente per impostazione predefinita. Puoi anche posizionare un elemento utilizzando grid-column-end al di fuori della griglia esplicita definita. In entrambi i casi, la griglia creerà canali per far funzionare il layout e questi canali sono chiamati griglia implicita.

Il più delle volte non fa alcuna differenza se utilizzi una griglia implicita o esplicita. Tuttavia, con il posizionamento basato su riga potresti riscontrare la differenza principale tra i due.

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

Tuttavia, funziona solo per la griglia esplicita. Crea un layout di tre righe di elementi posizionati automaticamente in cui vuoi che il primo elemento si estenda fino alla riga di fine della griglia.

Potresti pensare di poter assegnare a quell'articolo il valore grid-row: 1 / -1. Nella demo di seguito puoi vedere che non funziona. I canali vengono creati nella griglia implicita, non è possibile raggiungere la fine della griglia utilizzando -1.

Dimensionamento delle tracce implicite

Le tracce create nella griglia implicita avranno dimensioni automatiche per impostazione predefinita. Tuttavia, se vuoi controllare le dimensioni 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 un pattern di tracce larghe 100 e 200 pixel. In questo caso, la prima colonna implicita sarà di 100 pixel, la seconda di 200 pixel, la terza di 100 pixel e così via.

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

Linee della griglia denominate

Può essere più facile posizionare gli elementi in un layout se le righe hanno un nome anziché un numero. Puoi assegnare un nome a qualsiasi riga della griglia inserendo un nome a tua scelta tra parentesi quadre. È possibile aggiungere più nomi, separati da uno spazio all'interno delle stesse parentesi. Una volta che hai assegnato un nome alle righe, 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 alle aree della griglia e posizionare gli elementi in queste aree. Si tratta di una tecnica molto utile perché ti consente di vedere l'aspetto del componente direttamente nel CSS.

Per iniziare, assegna un nome ai figli 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, tranne le parole chiave auto e span. Dopo aver assegnato un nome a tutti gli elementi, utilizza la proprietà grid-template-areas per definire le celle della griglia che ogni elemento occuperà. 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 estendere i canali, ripeti il nome.
• Le aree create ripetendo il nome devono essere rettangolari e non possono essere disconnesse.

Se violi una delle regole riportate sopra, il valore viene considerato non valido e ignorato.

Per lasciare spazi bianchi nella griglia, utilizza un . o più senza spazi bianchi tra di 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 punto, è facile ridefinirlo utilizzando le query sui media. Nell'esempio seguente ho creato un layout a due colonne che passa a tre colonne ridefinendo il valore di grid-template-columns e grid-template-areas. Apri l'esempio in una nuova finestra per modificare le dimensioni dell'area visibile e vedere la modifica del layout.

Puoi anche vedere la relazione tra la proprietà grid-template-areas e writing-mode e la direzione, come per gli altri metodi di griglia.

Proprietà di abbreviazione

Esistono due proprietà abbreviate che ti consentono di impostare molte delle proprietà della griglia contemporaneamente. Queste possono sembrare un po' confuse finché non analizzi esattamente come si combinano. Sta a te decidere se usarli o se preferisci usare le lettere maiuscole.

grid-template

Browser Support

• 57
• 16
• 52
• 10.1

Source

La proprietà grid-template è un'abbreviazione di grid-template-rows, grid-template-columns e grid-template-areas. Le righe vengono definite per prime, insieme al valore di 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

Browser Support

• 57
• 16
• 52
• 10.1

Source

La scorciatoia grid può essere utilizzata esattamente nello stesso modo della scorciatoia grid-template. Se utilizzato in questo modo, reimposta le altre proprietà della griglia accettate sui relativi valori iniziali. Il set completo è composto da:

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

In alternativa, puoi utilizzare questa abbreviazione 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 appreso nella guida su flexbox. In modalità griglia, le proprietà che iniziano con justify- vengono sempre utilizzate sull'asse in linea, ovvero la direzione in cui vengono visualizzate le frasi nella modalità di scrittura.

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

• justify-content e align-content: distribuiscono spazio aggiuntivo nel contenitore della griglia intorno 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 è inserito.
• 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 disporre i canali di larghezza fissa. Ciò significa che abbiamo spazio sia nelle dimensioni in linea che in blocco della griglia. Prova valori diversi per align-content e justify-content per vedere il comportamento dei canali.

Nota come gli spazi diventino più grandi quando utilizzi valori come space-between e come qualsiasi elemento della griglia che si estenda su due tracce aumenti per assorbire lo spazio aggiuntivo aggiunto allo spazio.

Nota: come con flexbox, queste proprietà funzioneranno solo se è presente spazio aggiuntivo da distribuire. Se le tracce della griglia riempiono ordinatamente il contenitore, non sarà possibile suddividere lo spazio.

Spostare i contenuti

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

Nota: se l'elemento è un'immagine o qualcos'altro con proporzioni intrinseche, il valore iniziale sarà start anziché stretch per evitare di allungare gli elementi.

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

Verificare di aver compreso

Metti alla prova le tue conoscenze sulla griglia

Quali dei seguenti sono termini della griglia CSS?

lines

La griglia è divisa da questi separatori orizzontali e verticali.

cerchie

Mi dispiace, non esistono concetti di cerchi nella griglia CSS.

cellule

Un singolo incrocio tra una riga e una colonna crea una cella della griglia.

aree

Più celle insieme.

treni

Spiacenti, non sono presenti concetti di treni nella griglia CSS.

lacune

Lo spazio tra le celle.

tracce

Una singola riga o una colonna è un canale nella griglia.

main {
  display: grid;
}

Qual è la direzione di layout predefinita di una griglia?

Righe

Se non vengono definite colonne, gli elementi secondari della griglia vengono disposti nella direzione del blocco come di consueto.

Colonne

Se fosse presente grid-auto-flow: column, la griglia verrebbe visualizzata sotto forma di colonne.

Qual è la differenza tra auto-fit e auto-fill?

auto-fit allunga le celle per adattarle al contenitore, mentre auto-fill no.

auto-fill inserisce nel modello il maggior numero possibile di elementi, senza allungarlo. La vestibilità li rende adatti.

auto-fit allunga un contenitore in modo che si adatti ai figli, mentre auto-fill adatta i figli al contenitore.

Non è questo il comportamento di queste proprietà.

Che cos'è min-content?

Uguale a 0%

0% è un valore relativo della casella principale, mentre min-content è relativo alle parole e alle immagini nella casella.

La lettera più piccola

Sebbene esista una lettera più piccola, le lettere non sono ciò a cui si riferisce min-content.

La parola o l'immagine più lunga.

Nella frase "CSS è fantastico", la parola fantastico è min-content.

Che cos'è max-content?

La frase più lunga o l'immagine più grande.

Si tratta della dimensione massima richiesta o specificata per i contenuti della casella. Si tratta di una frase o di un'immagine nella loro larghezza massima.

La lettera più lunga.

Sebbene esista una lettera più lunga, le lettere non sono ciò a cui si riferisce max-content.

La parola più lunga.

La parola più lunga è min-content.

Che cos'è il posizionamento automatico?

Quando la griglia prende gli elementi secondari e li inserisce nell'ordine migliore in base alle strategie di ricerca del browser.

Nessun browser modificherà l'ordine dei contenuti, ma solo i tuoi stili.

Quando agli elementi secondari della griglia è stato assegnato un grid-area e sono posizionati in quella cella.

Si tratta di un posizionamento esplicito, non automatico.

Quando gli elementi della griglia non assegnati vengono posizionati uno accanto all'altro in un modello di layout.

Gli elementi della griglia senza un'area esplicita verranno posizionati nella cella della griglia successiva disponibile

Risorse

Questa guida fornisce una panoramica delle diverse parti della specifica del layout della griglia. Per scoprire di più, consulta le seguenti risorse.

• MDN CSS Grid Layout
• Guida completa alla griglia
• Creare un contenitore della griglia
• Esaminare la griglia CSS in Chrome DevTools
• Una raccolta completa di materiale didattico sulle reti