Condivisione della tecnologia

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Tutorial sul layout della griglia CSS Grid

I. Panoramica

Il layout a griglia (Grid) è la soluzione di layout CSS più potente.

Divide le pagine Web in griglie e diverse griglie possono essere combinate arbitrariamente per creare vari layout. In passato, gli effetti che potevano essere ottenuti solo attraverso complessi framework CSS ora sono integrati nei browser.

Un layout come quello nella foto sopra è la specialità del layout a griglia.

Il layout della griglia presenta alcune somiglianze con il layout Flex, entrambi possono specificare la posizione di più elementi all'interno del contenitore. Tuttavia, ci sono differenze importanti.

Il layout flessibile è un layout ad asse e può solo specificare la posizione dell'"oggetto" rispetto all'asse, che può essere considerato comeDisposizione unidimensionale . Il layout a griglia divide il contenitore in "righe" e "colonne", genera celle e quindi specifica la cella in cui si trova l'"elemento", che può essere considerato comeDisposizione 2D . Il layout a griglia è molto più potente del layout Flex.

2. Concetti di base

Prima di apprendere il layout della griglia, è necessario comprendere alcuni concetti di base.

2.1 Contenitori e progetti

Un'area con un layout a griglia è chiamata "contenitore". Gli elementi figlio che utilizzano il posizionamento della griglia all'interno del contenitore sono chiamati "elementi".

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>
1
2
3
4
5

Nel codice sopra, il più esterno<div>L'elemento è il contenitore, e i tre interni<div>Gli elementi sono oggetti.

Avviso: il progetto può essere solo l'elemento figlio di livello superiore del contenitore e non include gli elementi figlio del progetto, come il codice precedente<p> Gli elementi non sono oggetti. Il layout della griglia ha effetto solo sui progetti.

2.2 Righe e colonne

L'area orizzontale all'interno del contenitore è chiamata "riga" e l'area verticale è chiamata "colonna".

Nell'immagine sopra, le aree scure orizzontali sono "righe" e le aree scure verticali sono "colonne".

2.3 Celle

L'area di intersezione di righe e colonne è chiamata "cella".

In circostanze normali,nok emle colonne produrrannon x m cellule. Ad esempio, 3 righe e 3 colonne produrranno 9 celle.

2.4 Linee della griglia

Le linee che dividono la griglia sono chiamate "linee della griglia". Le linee della griglia orizzontali dividono le righe e le linee della griglia verticali dividono le colonne.

In circostanze normali,nOKn + 1linea della griglia orizzontale della radice,mElencatom + 1Sono presenti tre linee della griglia verticali, ad esempio quattro linee della griglia orizzontali su tre righe.

L'immagine sopra è una griglia 4 x 4 con un totale di 5 linee di griglia orizzontali e 5 linee di griglia verticali.

3. Proprietà del contenitore

Le proprietà del layout Griglia sono divise in due categorie. Un tipo è definito nel contenitore ed è denominato proprietà del contenitore; l'altro tipo è definito nel progetto ed è denominato proprietà del progetto. Questa parte introduce innanzitutto le proprietà del contenitore.

3.1 attributo di visualizzazione

display: gridSpecifica un contenitore per utilizzare un layout a griglia.

div {
  display: grid;
}
1
2
3

L'immagine sopra èdisplay: gridDiEffetto。

Per impostazione predefinita, gli elementi contenitore sono elementi a livello di blocco, ma possono anche essere impostati come elementi in linea.

div {
  display: inline-grid;
}
1
2
3

Il codice sopra specificadivÈ un elemento in linea che utilizza internamente un layout a griglia.

L'immagine sopra èdisplay: inline-gridDiEffetto。

Tieni presente che dopo aver impostato il layout a griglia, i sottoelementi del contenitore (elementi)float、display: inline-block、display: table-cell、vertical-alignEcolumn-*Tutte le altre impostazioni non saranno valide.

3.2 Attributo grid-template-columns, attributo grid-template-rows

Dopo che il contenitore ha specificato il layout della griglia, deve dividere le righe e le colonne.grid-template-columnsLe proprietà definiscono la larghezza di ciascuna colonna,grid-template-rowsLa proprietà definisce l'altezza di ciascuna riga.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}
1
2
3
4
5

codice sopraSpecifica una griglia con tre righe e tre colonne. La larghezza della colonna e l'altezza della riga sono entrambe100px。

Invece di utilizzare unità assolute, puoi anche utilizzare percentuali.

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}
1
2
3
4
5

（1）ripeti()

A volte è molto problematico scrivere ripetutamente lo stesso valore, soprattutto quando sono presenti molte griglie.In questo momento, puoi usarerepeat() Funzione che semplifica i valori ripetuti.Il codice precedente utilizzarepeat()Riscritto come segue.

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}
1
2
3
4
5

repeat()Accetta due parametri, il primo parametro è il numero di ripetizioni (3 nell'esempio sopra) e il secondo parametro è il valore da ripetere.

repeat()Va bene ripetere uno schema.

grid-template-columns: repeat(2, 100px 20px 80px);
1

codice sopraSono definite 6 colonne, la larghezza della prima e della quarta colonna è100px, la seconda e la quinta colonna20px, la terza colonna e la sesta colonna80px。

(2) parola chiave a compilazione automatica

A volte la dimensione della cella è fissa, ma la dimensione del contenitore non è definita.Se vuoi che ogni riga (o colonna) contenga il maggior numero di celle possibile, puoi utilizzareauto-fillLe parole chiave rappresentano il completamento automatico.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}
1
2
3
4

codice sopraRappresenta la larghezza di ogni colonna100px, quindi si riempie automaticamente finché il contenitore non può contenere più colonne.

A parteauto-fille una parola chiaveauto-fit , il comportamento di entrambi è sostanzialmente lo stesso.Solo quando il contenitore è sufficientemente largo da contenere tutte le celle in una riga e la larghezza della cella non è fissadifferenze comportamentali：auto-fillLa larghezza rimanente verrà riempita con celle vuote.auto-fitproverà ad espandere la larghezza della cella.

(3) parola chiave fr

Per esprimere in modo conveniente le relazioni proporzionali, viene fornito il layout della grigliafr Parola chiave (abbreviazione di frazione, che significa "frammento").Se le larghezze delle due colonne sono1frE2fr, il che significa che quest'ultimo è il doppio del primo.

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

codice sopraRappresenta due colonne della stessa larghezza.

frPuò essere utilizzato insieme alle unità di lunghezza assoluta, il che è molto conveniente.

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}
1
2
3
4

codice soprasignifica che la prima colonna è larga 150 pixel e la seconda colonna è larga la metà della terza colonna.

(4) minmax()

minmax() La funzione produce un intervallo di lunghezze, indicando che la lunghezza rientra in tale intervallo. Accetta due parametri, il valore minimo e il valore massimo.

grid-template-columns: 1fr 1fr minmax(100px, 1fr);
1

Nel codice sopra,minmax(100px, 1fr)Indica che la larghezza della colonna non è inferiore a100px,non maggiore di1fr。

(5) parola chiave automatica

autoLa lunghezza di rappresentazione delle parole chiave è determinata dal browser stesso.

grid-template-columns: 100px auto 100px;
1

Nel codice sopra, la larghezza della seconda colonna è sostanzialmente uguale alla larghezza massima della cella nella colonna, a meno che non sia impostato il contenuto della cellamin-widthe questo valore è maggiore della larghezza massima.

(6) Nome delle linee della griglia

grid-template-columnsattributi egrid-template-rowsNelle proprietà è inoltre possibile utilizzare le parentesi quadre per specificare il nome di ciascuna linea della griglia per un facile riferimento in futuro.

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
1
2
3
4
5

Il codice sopra specifica un layout di griglia di 3 righe x 3 colonne, quindi ci sono 4 linee di griglia verticali e 4 linee di griglia orizzontali. All'interno delle parentesi quadre ci sono i nomi delle otto righe.

Il layout della griglia consente più nomi per la stessa riga, ad esempio[fifth-line row-5]。

(7) Esempio di disposizione

grid-template-columns Le proprietà sono molto utili per il layout della pagina web. Il layout a due colonne richiede solo una riga di codice.

.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}
1
2
3
4

Il codice sopra imposta la colonna di sinistra al 70% e la colonna di destra al 30%.

Anche il tradizionale layout a dodici griglie è facile da scrivere.

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

3.3 Attributo gap-riga-griglia, attributo gap-colonna-griglia, attributo gap-griglia

grid-row-gapLa proprietà imposta la spaziatura tra le righe (interlinea),grid-column-gapLa proprietà imposta la spaziatura tra le colonne (spaziatura delle colonne).

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
1
2
3
4

codice sopramezzo,grid-row-gapUtilizzato per impostare l'interlinea,grid-column-gapUtilizzato per impostare la spaziatura delle colonne.

grid-gapLe proprietà sonogrid-column-gapEgrid-row-gapLa forma abbreviata combinata di , la sintassi è la seguente.

grid-gap: <grid-row-gap> <grid-column-gap>;
1

Pertanto, la parte di codice CSS sopra è equivalente al codice seguente.

.container {
  grid-gap: 20px 20px;
}
1
2
3

Segrid-gapIl secondo valore viene omesso e il browser considera il secondo valore uguale al primo valore.

Secondo gli standard più recenti, i tre nomi di attributi sopra indicatigrid-Il prefisso è stato rimosso,grid-column-gapEgrid-row-gapscritto comecolumn-gapErow-gap，grid-gapscritto comegap。

3.4 proprietà grid-template-areas

Il layout della griglia consente di specificare "aree", composte da celle singole o multiple.grid-template-areasLe proprietà vengono utilizzate per definire le aree.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas:
    'a b c'
    'd e f'
    'g h i';
}
1
2
3
4
5
6
7
8
9

Il codice sopra divide prima 9 celle e poi le nominaaarrivareiLe nove aree corrispondono rispettivamente a queste nove celle.

Il metodo di scrittura per unire più celle in un'unica area è il seguente.

grid-template-areas:
  'a a a'
  'b b b'
  'c c c';
1
2
3
4

Il codice sopra divide 9 celle ina、b、ctre aree.

Di seguito è riportato un layout di esempio.

grid-template-areas:
  'header header header'
  'main main sidebar'
  'footer footer footer';
1
2
3
4

Nel codice precedente, la parte superiore è l'area dell'intestazioneheader, la parte inferiore è l'area del piè di paginafooter, la parte centrale èmainEsidebar。

Se alcune aree non necessitano di essere sfruttate utilizzare i “punti” (.)esprimere.

grid-template-areas:
  'a . c'
  'd . f'
  'g . i';
1
2
3
4

Nel codice precedente, la colonna centrale è un punto, il che significa che la cella non viene utilizzata o che la cella non appartiene ad alcuna area.

Tieni presente che la denominazione delle regioni influisce sulle linee della griglia.La linea della griglia iniziale di ciascuna area viene denominata automaticamente区域名-start, alla linea della griglia terminata viene assegnato automaticamente un nome区域名-end。

Ad esempio, l'area viene denominataheader, vengono richiamate le linee della griglia orizzontali e verticali nella posizione inizialeheader-start, vengono chiamate le linee della griglia orizzontali e le linee della griglia verticali nella posizione finaleheader-end。

3.5 Attributo griglia-flusso automatico

Dopo che la griglia è stata divisa, gli elementi figlio del contenitore verranno automaticamente posizionati in ciascuna griglia in ordine. L'ordine di posizionamento predefinito è "prima riga, seconda colonna", ovvero riempire prima la prima riga, quindi iniziare a posizionare la seconda riga, che è l'ordine dei numeri nella figura seguente.

Questo ordine è dato dagrid-auto-flowDeterminato dall'attributo, il valore predefinito èrow , cioè "prima riga, poi riga".Puoi anche impostarlo sucolumn, diventa "prima la riga, poi la riga".

grid-auto-flow: column;
1

codice sopragià impostatocolumnD'ora in poi, l'ordine di posizionamento diventerà quello mostrato di seguito.

grid-auto-flowOltre a impostare l'attributo surowEcolumn, può anche essere impostato surow denseEcolumn dense . Questi due valori vengono utilizzati principalmente per posizionare automaticamente gli elementi rimanenti dopo che a determinati elementi sono state assegnate le posizioni.

Esempio di seguitoLascia che il progetto n. 1 e il progetto n. 2 occupino due celle ciascuno, quindi nell'impostazione predefinitagrid-auto-flow: rowIn questo caso verrà prodotto il seguente layout.

Nell'immagine sopra, la posizione dietro l'elemento n. 1 è vuota. Questo perché l'elemento n. 3 segue l'elemento n. 2 per impostazione predefinita, quindi sarà classificato dietro l'elemento n. 2.

Ora modifica le impostazioni e impostalo surow dense, significa "prima riga, seconda colonna", e riempilo il più strettamente possibile senza spazi.

grid-auto-flow: row dense;
1

codice sopraL'effetto è il seguente.

L'immagine sopra riempirà prima la prima riga, poi la seconda riga, quindi l'elemento 3 seguirà l'elemento 1. Gli elementi n. 8 e n. 9 verranno posizionati nella quarta riga.

Se modifichi l'impostazione incolumn dense, significa "prima la colonna, poi la riga", e riempi gli spazi il più possibile.

grid-auto-flow: column dense;
1

codice sopraL'effetto è il seguente.

L'immagine sopra riempirà prima la prima colonna e poi la seconda colonna, quindi l'elemento n. 3 è nella prima colonna e l'elemento n. 4 è nella seconda colonna. I punti 8 e 9 sono stati inseriti nella quarta colonna.

3.6 Attributo giustifica-elementi, attributo allinea-elementi, attributo posiziona-elementi

justify-itemsLa proprietà imposta la posizione orizzontale del contenuto della cella (sinistra, centro, destra),align-itemsLa proprietà imposta la posizione verticale (in alto, al centro, in basso) del contenuto della cella.

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}
1
2
3
4

Questi due attributi sono scritti esattamente allo stesso modo e possono assumere i seguenti valori.

• inizio: allinea il bordo iniziale della cella.
• end: allinea al bordo finale della cella.
• centro: centro all'interno della cella.
• allunga: allunga per riempire l'intera larghezza della cella (valore predefinito).

.container {
  justify-items: start;
}
1
2
3

codice sopraIndica che il contenuto della cella è allineato a sinistra e l'effetto è quello mostrato di seguito.

.container {
  align-items: start;
}
1
2
3

codice sopraIndica che il contenuto della cella è allineato con la testa e l'effetto è quello mostrato di seguito.

place-itemsLe proprietà sonoalign-itemsattributi ejustify-itemsLa forma abbreviata combinata della proprietà.

place-items: <align-items> <justify-items>;
1

Di seguito è riportato un esempio.

place-items: start end;
1

Se il secondo valore viene omesso, il browser lo considera uguale al primo valore.

3.7 Attributo giustifica-contenuto, attributo allinea-contenuto, attributo posiziona-contenuto

justify-contentL'attributo è la posizione orizzontale dell'intera area del contenuto all'interno del contenitore (sinistra, centro, destra),align-contentL'attributo è la posizione verticale dell'intera area del contenuto (in alto, al centro, in basso).

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
1
2
3
4

Questi due attributi sono scritti esattamente allo stesso modo e possono assumere i seguenti valori. (Le immagini seguenti sono tutte basate sujustify-contentAd esempio, proprietàalign-content Il diagramma degli attributi è esattamente lo stesso, tranne per il fatto che l'orientamento orizzontale viene modificato in orientamento verticale. )

• start - il bordo iniziale del contenitore allineato.
  
• end: allinea il bordo finale del contenitore.
  
• center - Centrare il contenitore all'interno.
  
• stretch - Quando la dimensione dell'elemento non è specificata, allunga per occupare l'intero contenitore della griglia.
  
• space-around: spazio uguale su entrambi i lati di ciascun elemento. Pertanto, lo spazio tra gli elementi è due volte più grande dello spazio tra gli elementi e il bordo del contenitore.
  
• space-between: c'è uguale spazio tra gli elementi e nessuno spazio tra gli elementi e il bordo del contenitore.
  
• space-evenly: lo spazio tra gli elementi è uguale e lo spazio tra gli elementi e il bordo del contenitore ha la stessa lunghezza.
  
  place-contentLe proprietà sonoalign-contentattributi ejustify-contentLa forma abbreviata combinata della proprietà.

place-content: <align-content> <justify-content>;
1

Di seguito è riportato un esempio.

place-content: space-around space-evenly;
1

Se ometti il ​​secondo valore, il browser presuppone che il secondo valore sia uguale al primo valore.

3.8 proprietà grid-auto-columns, proprietà grid-auto-rows

A volte, ad alcuni elementi vengono assegnate posizioni esterne alla griglia esistente. Ad esempio, la griglia ha solo 3 colonne, ma un determinato elemento è specificato nella quinta riga. A questo punto, il browser genererà automaticamente griglie aggiuntive per facilitare il posizionamento degli elementi.

grid-auto-columnsattributi egrid-auto-rows Le proprietà vengono utilizzate per impostare la larghezza della colonna e l'altezza della riga della griglia ridondante creata automaticamente dal browser.Sono scritti allo stesso modo digrid-template-columnsEgrid-template-rows Esattamente la stessa. Se queste due proprietà non vengono specificate, il browser determina la larghezza della colonna e l'altezza della riga della nuova griglia interamente in base alla dimensione del contenuto della cella.

Esempio di seguitoAll'interno, la griglia divisa è di 3 righe x 3 colonne, ma l'elemento n. 8 è specificato nella quarta riga e l'elemento n. 9 è specificato nella quinta riga.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-rows: 50px;
}
1
2
3
4
5
6

Il codice sopra specifica che la nuova altezza della riga è uniformemente 50px (l'altezza della riga originale è 100px).

3.9 Attributo del modello di griglia, attributo della griglia

grid-templateLe proprietà sonogrid-template-columns、grid-template-rowsEgrid-template-areasLa forma abbreviata combinata di queste tre proprietà.

gridLe proprietà sonogrid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flowL'abbreviazione combinata di queste sei proprietà.

Dal punto di vista della facilità di lettura e scrittura, si consiglia di non unire gli attributi, quindi questi due attributi non verranno introdotti in dettaglio qui.

4. Attributi del progetto

Nel progetto sono definite le seguenti proprietà.

4.1 proprietà inizio colonna griglia, proprietà fine colonna griglia, proprietà inizio riga griglia, proprietà fine riga griglia

È possibile specificare la posizione del progetto. Il metodo specifico consiste nel specificare i quattro bordi del progetto e quali linee della griglia sono posizionate rispettivamente.

• grid-column-startProprietà: linee della griglia verticale in cui si trova il bordo sinistro
• grid-column-endProprietà: la linea della griglia verticale in cui si trova il bordo destro
• grid-row-startProprietà: la linea della griglia orizzontale in cui si trova il bordo superiore
• grid-row-endProprietà: la linea della griglia orizzontale in cui si trova il bordo inferiore

.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
}
1
2
3
4

codice sopraSpecifica che il bordo sinistro dell'elemento 1 è la seconda linea della griglia verticale e il bordo destro è la quarta linea della griglia verticale.

Nell'immagine sopra, sono specificati solo i bordi sinistro e destro dell'elemento n. 1 e i bordi superiore e inferiore non sono specificati, quindi verrà utilizzata la posizione predefinita, ovvero il bordo superiore è la prima linea orizzontale della griglia, e il bordo inferiore è la seconda linea della griglia orizzontale.

Ad eccezione dell'elemento n. 1, gli altri elementi non hanno posizioni specificate e vengono disposti automaticamente dal browser. Al momento, le loro posizioni sono determinate dal contenitoregrid-auto-flowDeterminato dall'attributo, il valore predefinito di questo attributo èrow , quindi verranno disposti "prima riga, poi colonna".I lettori possono modificare il valore di questo attributo incolumn、row denseEcolumn dense, per vedere come sono cambiate le posizioni degli altri elementi.

Esempio di seguitoÈ l'effetto di specificare le posizioni di quattro confini.

.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}
1
2
3
4
5
6

I valori di questi quattro attributi, oltre ad essere specificati come numero della linea della griglia, possono essere specificati anche come nome della linea della griglia.

.item-1 {
  grid-column-start: header-start;
  grid-column-end: header-end;
}
1
2
3
4

Nel codice precedente, le posizioni dei bordi sinistro e destro sono specificate come nomi delle linee della griglia.

Possono essere utilizzati anche i valori di questi quattro attributispanParola chiave che indica "span", ovvero quante griglie si estendono tra i bordi sinistro e destro (bordi superiore e inferiore).

.item-1 {
  grid-column-start: span 2;
}
1
2
3

codice sopraIndica che il bordo sinistro dell'elemento n. 1 si estende su 2 griglie dal bordo destro.

Questo è legato acodice qui sottoL'effetto è esattamente lo stesso.

.item-1 {
  grid-column-end: span 2;
}
1
2
3

Utilizzando questi quattro attributi, se c'è una sovrapposizione di elementi, utilizzarez-indexLa proprietà specifica l'ordine di sovrapposizione degli elementi.

4.2 Attributo colonna-griglia, attributo riga-griglia

grid-columnLe proprietà sonogrid-column-startEgrid-column-endLa forma abbreviata combinata digrid-rowLe proprietà sonogrid-row-startattributi egrid-row-endLa forma abbreviata della fusione.

.item {
  grid-column: <start-line/ <end-line>;
  grid-row: <start-line/ <end-line>;
}
1
2
3
4

Di seguito è riportato un esempio.

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
1
2
3
4
5
6
7
8
9
10
11

Nel codice precedente, il progettoitem-1Occupa la prima riga, dalla prima riga della colonna alla terza riga della colonna.

Tra questi due attributi puoi anche usarespanParola chiave che indica il numero di griglie da estendere.

.item-1 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}
1
2
3
4
5
6
7
8
9
10
11

codice sopradentro, progettoitem-1L'area occupata comprende la prima riga + seconda riga e la prima colonna + seconda colonna.

La barra e le parti seguenti possono essere omesse e si estendono su una griglia per impostazione predefinita.

.item-1 {
  grid-column: 1;
  grid-row: 1;
}
1
2
3
4

Nel codice precedente, il progettoitem-1Occupare la prima griglia nell'angolo in alto a sinistra.

4.3 attributo area della griglia

grid-areaL'attributo specifica l'area in cui viene posizionato l'elemento.

.item-1 {
  grid-area: e;
}
1
2
3

codice sopraIn , Il progetto n. 1 si trova inearea, l'effetto è quello mostrato di seguito.

grid-areaLe proprietà possono essere utilizzate anche comegrid-row-start、grid-column-start、grid-row-end、grid-column-endLa forma abbreviata unita specifica direttamente l'ubicazione del progetto.

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
1
2
3

Di seguito è riportato unesempio。

.item-1 {
  grid-area: 1 / 1 / 3 / 3;
}
1
2
3

4.4 Attributo giustificarsi, attributo allinearsi, attributo posizionarsi

justify-selfLa proprietà imposta la posizione orizzontale (sinistra, centro, destra) del contenuto della cella, seguita dajustify-itemsLe proprietà vengono utilizzate esattamente allo stesso modo, ma si applicano solo a un singolo elemento.

align-selfLa proprietà imposta la posizione verticale (in alto, al centro, in basso) del contenuto della cella, seguita daalign-itemsL'utilizzo degli attributi è esattamente lo stesso e riguarda solo un singolo progetto.

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}
1
2
3
4

Entrambe le proprietà possono assumere i seguenti quattro valori.

• inizio: allinea il bordo iniziale della cella.
• end: allinea al bordo finale della cella.
• centro: centro all'interno della cella.
• allunga: allunga per riempire l'intera larghezza della cella (valore predefinito).

Sotto èjustify-self: startesempio di.

.item-1 {
  justify-self: start;
}
1
2
3

place-selfLe proprietà sonoalign-selfattributi ejustify-selfLa forma abbreviata combinata della proprietà.

place-self: <align-self> <justify-self>;
1

Di seguito è riportato un esempio.

place-self: center center;
1

Se il secondo valore viene omesso,place-selfLa proprietà considererà uguali i due valori.