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.
- 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.
- Gli elementi secondari diretti del contenitore della griglia verranno posizionati automaticamente in questa griglia.
- In alternativa, puoi posizionare gli elementi nella posizione esatta che preferisci.
- È possibile assegnare un nome alle linee e alle aree della griglia per facilitarne il posizionamento.
- Lo spazio libero nel contenitore della griglia può essere distribuito tra i binari.
- 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.
![Come descritto nella didascalia e nelle istruzioni](https://web.dev/static/learn/css/grid/image/as-described-the-caption-3a7c065047c37.jpg?authuser=3&hl=it)
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:
Sono disponibili delle scorciatoie che ti consentono di impostare contemporaneamente le linee di inizio e di fine:
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
ealign-content
: distribuire spazio aggiuntivo nel contenitore della griglia intorno o tra i canali.justify-self
ealign-self
: vengono applicate a un elemento della griglia per spostarlo all'interno dell'area della griglia in cui è posizionato.justify-items
ealign-items
: vengono applicate al contenitore della griglia per impostare tutte le proprietà dijustify-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
Quali dei seguenti sono termini della griglia CSS?
main { display: grid; }
Qual è la direzione di layout predefinita di una griglia?
grid-auto-flow: column
, di conseguenza una griglia sarebbe layout a colonne.Qual è la differenza tra auto-fit
e auto-fill
?
auto-fit
estenderà le celle per adattarle al contenitore, al contrario di auto-fill
.auto-fill
inserisce il maggior numero possibile di elementi nel modello, senza allungare. Fit rendeli adatti.auto-fit
estenderà un container per adattarsi al contenitore secondario, dove auto-fill
li adatta al contenitore.Che cos'è min-content
?
min-content
è un valore relativo alle parole e alle immagini contenute nella casella.min-content
.min-content
.Che cos'è max-content
?
max-content
.min-content
.Che cos'è il posizionamento automatico?
grid-area
e vengono posizionati in quella cella.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.