Share
Una cosa che abbiamo menzionato, ma che deve ancora coprire correttamente in questa serie è aree della griglia. Finora i nostri elementi della griglia sono stati contenuti in un'unica cella della griglia, ma possiamo ottenere layout più utili superando questi limiti. Diamo un'occhiata!
Ecco la griglia su cui abbiamo lavorato: nove elementi della griglia posizionati automaticamente all'interno di tre colonne uguali, tre file uguali, divisi da grondaie di 20 px.
Attualmente i nostri articoli hanno solo stili di colore, ma torniamo a ciò che abbiamo imparato nel primo tutorial e ne aggiungiamo alcuni grid-column e grid-fila regole, questa volta con qualcosa in più:
.item-1 background: # b03532; grid-column: 1/3; grid-row: 1;
In questa stenografia grid-column affermazione che stiamo usando in modo efficace grid-column-start e grid-column-end, dicendo all'elemento di iniziare alla linea 1 della griglia e terminare alla riga 3 della griglia.
Linee di griglia 1 e 3Ecco cosa ci dà; il primo elemento ora si estende su due celle, spingendo gli altri elementi verso destra e verso il basso in base all'algoritmo di posizionamento automatico di Grid.
Lo stesso può essere fatto con le file, il che ci darebbe un'area molto più grande nella parte in alto a sinistra della nostra griglia.
.item-1 background: # b03532; grid-column: 1/3; grid-row: 1/3;
Usando quella che è forse una sintassi più semplice che possiamo cambiare grid-column-end per il campata parola chiave. Con campata non siamo vincolati a specificare dove finisce l'area, definendo invece il numero di tracce che l'articolo dovrebbe diffondere tra:
.item-1 background: # b03532; grid-column: 1 / span 2; grid-row: 1 / span 2;
Questo ci dà lo stesso risultato finale, ma se dovessimo cambiare il punto in cui vogliamo che inizi l'articolo, non saremmo più obbligati a cambiare la fine.
Nella seguente demo puoi vedere che abbiamo svuotato il layout rimuovendo quattro degli elementi. Abbiamo dichiarato il posizionamento su due dei nostri articoli: il primo comprende due colonne e due righe, mentre il quarto inizia dalla colonna 3, riga 2 e si estende verso il basso su due tracce:
Gli articoli rimanenti riempiono lo spazio disponibile automaticamente. Ciò evidenzia perfettamente come un layout di griglia non debba riflettere l'ordine di origine degli elementi.
Nota: ci sono molte situazioni in cui l'ordine di origine assolutamente dovrebbero riflettere la presentazione, non dimenticare l'accessibilità.
L'utilizzo dei metodi di numerazione che abbiamo descritto fino ad ora funziona bene, ma Grid Template Areas può rendere la definizione dei layout ancora più intuitiva.
In particolare, ci permettono di nominare le aree sulla griglia. Con quelle aree nominate, possiamo fare riferimento a esse (anziché ai numeri di riga) per posizionare i nostri articoli. Rimaniamo fedeli alla nostra demo attuale per il momento e usiamola per farci un impaginato layout di pagina che comprende:
Definiamo queste aree nel nostro contenitore della griglia, quasi come se le stessimo disegnando:
.grid-1 / * ... stili esistenti * / grid-template-areas: "header header header" "main main sidebar" "footer footer footer";
Ora rivolgiamo la nostra attenzione agli oggetti, abbandonando il grid-column e grid-fila regole a favore di grid-zona:
.item-1 background: # b03532; grid-area: intestazione; .item-2 background: # 33a8a5; grid-area: main; .item-3 background: # 30997a; grid-area: sidebar; .item-4 background: # 6a478f; grid-area: footer;
Il nostro primo oggetto è inserito nell'intestazione, attraversando tutte e tre le colonne di intestazione. Il nostro secondo oggetto è assegnato all'area del contenuto principale, il terzo diventa la nostra barra laterale e il quarto il nostro piè di pagina. E questi non devono seguire neanche l'ordine di origine-.item-4 potrebbe facilmente essere posizionato nell'area dell'intestazione.
Come puoi vedere, questo rende la pagina molto più semplice. Infatti, mentre siamo in vena di rappresentare visivamente le nostre griglie, perché non andare oltre e utilizzare gli emoji?!
Una determinata pagina Web conterrà tutti i tipi di componenti annidati, quindi vediamo come funziona con Grid.
Quando dichiariamo un contenitore della griglia display: grid; solo i suoi discendenti diretti diventano elementi della griglia. Il contenuto che aggiungiamo a quegli elementi figlio non sarà influenzato da Grid a meno che non diciamo diversamente.
Nel nostro esempio, aggiungeremo .item-5 , .item-6, e .item-7 di nuovo nel markup, annidandoli dentro .item-2.
Quindi ora dobbiamo dichiarare il nostro .item-2 anche un contenitore di griglia, impostando la sua griglia con due colonne e due file.
display: grid; grid-template-columns: 1fr 30%; grid-template-rows: auto auto; intercapedine: 20px; grid-template-areas: "header header" "article sidebar";
Possiamo usare di nuovo i nomi "header", "article" e "sidebar"; non c'è confusione, perché tutto rimane nel contesto. Queste aree della griglia si applicano solo alla griglia all'interno .item-2.
Per riassumere ciò di cui stavamo parlando:
Accentsconagua
grid-column ci offre un modo stenografico per definire dove un oggetto inizia e finisce.campata parola chiave per rendere le nostre regole più flessibili.Grid-template-aree darci il potere di nominare le nostre aree della griglia (anche usando gli emoji se l'umore ci porta).display: grid; e seguendo lo stesso processo.Ancora una volta abbiamo appreso alcuni aspetti utili delle specifiche del Grid Layout CSS e ci stiamo avvicinando sempre più ai casi di utilizzo del mondo reale! Nel prossimo tutorial vedremo alcuni layout più complessi e vedremo come il design reattivo si inserisce nell'equazione.
