Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Grid Layout

CSS Grid Layout: usare le aree di Grid

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
CSS Grid Layout: Fluid Columns and Better Gutters
CSS Grid Layout: Going Responsive With auto-fill and minmax()

Italian (Italiano) translation by Cinzia Sgariglia (you can also view the original English article)

Una cosa che abbiamo citato, ma ancora dobbiamo coprire correttamente in questa serie sono le aree di Grid. Finora i nostri elementi di grid sono stati contenuti ognuno all'interno di una cella di grid singola, ma possiamo realizzare layout più utili infrangendo oltre quei confini. Diamo un'occhiata!

Definizione delle aree di Grid

Ecco la griglia su cui abbiamo lavorato: nove elementi di griglia automaticamente inseriti all'interno di tre colonne uguali, tre righe uguali, divise da spaziature di 20px.

Attualmente i nostri elementi hanno solo stili di colore, ma torniamo a quello che abbiamo imparato nel primo tutorial e aggiungiamo alcune regole grid-column e grid-row, questa volta con qualcosa in più:

In questa forma abbreviata di grid-column stiamo effettivamente usando grid-column-start e grid-column-end, raccontando all'elemento di iniziare alla linea della griglia 1 e finire alla griglia 3.

grid lines
Linee 1 e 3 della griglia

Ecco quello che ci dà; il primo elemento ora si espande attraverso due celle, spingendo gli altri oggetti a destra e giù secondo l'algoritmo di auto-posizionamento di Grid.

Lo stesso può essere fatto con le righe, che ci darebbe una zona più grande in alto a sinistra della nostra griglia.

Estendere le celle

Utilizzando quello che è forse una sintassi più semplice possiamo passare a grid-column-end tramite la parola chiave span. Con span noi non siamo vincolati a specificare dove finisce l'area, invece di definire a quante tracce l'elemento dovrebbe distribuirsi:

Questo ci dà lo stesso risultato finale, ma se dovessimo cambiare dove vogliamo che l'elemento inizi non saremmo più costretti a cambiare la fine.

Nella demo seguente potete vedere che abbiamo abbiamo svuotato il layout rimuovendo quattro degli elementi. Noi abbiamo dichiarato il posizionamento su due dei nostri elementi: il primo si estende su due colonne e due righe, mentre il quarto inizia sulla colonna 3, riga 2 e si estende verso il basso attraverso due tracce:

Gli elementi rimanenti riempiono automaticamente lo spazio disponibile. Questo evidenzia perfettamente come un layout di grid non deve riflettere l'ordine di origine degli elementi.

Nota: ci sono molte situazioni dove l'ordine di origine dovrebbe assolutamente riflettere la presentazione – non dimenticate l'accessibilità.

Dare un nome alle aree

Utilizzare i metodi di numerazione che abbiamo descritto finora funziona bene, ma i Template delle aree di Grid possono essere definire il layout in un modo ancora più intuitivo.

In particolare, ci permettono di dare un nome le aree della griglia. Con quelle aree identificate, possiamo riferirci a loro (anziché ai numeri di riga) per posizionare i nostri elementi. Atteniamoci alla nostra attuale demo per il momento e utilizziamola per fare noi stessi un layout di pagina grezzo composto da:

  • intestazione
  • contenuto principale
  • barra laterale
  • footer

Definiamo queste aree sul nostro contenitore di griglia, quasi come se li stessimo disegnando:

Posizionare gli elementi

Ora rivolgiamo la nostra attenzione agli elementi, abbandoniamo le regole grid-column e grid-row a favore di grid-area:

Il nostro primo elemento è inserito nell'intestazione, si estende su tutte le tre intestazioni di colonna. Al nostro secondo elemento viene assegnata l'area del contenuto principale, il terzo diventa la nostra barra laterale il quarto è il footer. E questi non deve seguire neanche l'ordine originale – .item-4 potrebbe essere posizionato facilmente nell'area dell'intestazione.

Come potete vedere, questo rende il layout di una pagina molto più facile. Infatti, mentre siamo in vena per rappresentare visivamente le nostre griglie, perché non andare ancora oltre e utilizzare gli emoji?!

Nidificare le aree di Grid

Una determinata pagina web conterrà tutti i tipi di componenti nidificati, quindi cerchiamo di vedere come funziona con Grid.

Quando dichiariamo un display:grid; solo i suoi discendenti diretti diventano gli elementi della griglia. Il contenuto che aggiungiamo a tali elementi figlio sarà completamente inalterato da Grid a meno che gli diciamo il contrario specificamente.

Nel nostro esempio, stiamo andando ad aggiungere .item-5, .item-6 e .item-7 indietro nel markup, nidificandoli in .item-2.

Così ora dobbiamo dichiarare il nostro .item-2 anche come un contenitore di griglia, impostando la sua griglia con due colonne e due righe.

Possiamo usare i nomi "header", "article" e "sidebar" nuovamente qui; non c'è confusione, perché tutto ciò rimane nel contesto. Queste aree di griglia si applicano solo alla griglia all'interno di .item-2.

Conclusione

Per riassumere quello di cui abbiamo parlato:

  1. grid-column ci offre un modo abbreviato di definire dove un elemento inizia e finisce.
  2. Possiamo anche usare la parola chiave span per rendere più flessibili le nostre regole.
  3. grid-template-areas ci danno il potere di nominare le nostre aree di griglia (anche utilizzando gli emoji se ci va).
  4. Possiamo anche nidificare le nostre griglie dichiarando gli elementi della griglia come display: grid; e seguire lo stesso processo.

Ancora una volta abbiamo imparato alcuni aspetti utili delle specifiche CSS Layout di Grid, e ci stiamo sempre più vicini ai casi di utilizzo nel mondo reale! Nel prossimo tutorial vedremo alcuni layout più complessi e vedremo come il responsive design si inserisce nell'equazione.

Risorse utili

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.