Italian (Italiano) translation by Cinzia Sgariglia (you can also view the original English article)
Come il nostro approccio verso il layout sul web sta cambiando, e in prima linea di questo cambiamento c'è il Layout con CSS Grid. Questa guida introduttiva veloce ignorerà i dettagli e le sfumature, invece di aiutarvi a rimanere bloccati, proprio ora.
Il vostro browser
Il layout con CSS Grid (noto ai suoi amici come "Grid") è un work in progress, e come tale troverete supporto per il browser piuttosto debole in questo momento. Per iniziare ad usarlo ora, avrete bisogno di utilizzare IE 11 (benché utilizzi una versione precedente delle specifiche), Edge di Microsoft, Chrome Canary o Firefox Nightly.
Forse l'approccio più semplice è quello di attivare le funzionalità della piattaforma web sperimentale in Chrome: chrome://flags/#enable-experimental-web-platformfeatures
.

Configura Grid
Grid ci consente di disporre gli elementi in una pagina, secondo le regioni create dalle guide.
Terminologia
Nella loro forma più semplice di queste guide, o linee di grid, tracciati di grid incorniciati in orizzontale e verticale. I tracciati di grid fungono da righe e colonne, con le spaziature che passano tra di loro. Quando i tracciati di grid orizzontali e verticali si intersecano, ci ritroviamo con le celle, proprio come quando usiamo le tabelle. Questi sono tutti i termini più importanti da capire.
Nell'immagine qui sotto vedrete una demo con grid, che mostra:
- linee di grid
- colonne
- righe
- celle
Per un layout grafico, potrebbe risultare più familiare se usassimo esattamente la stessa griglia, ma stringete alcuni tracciati per darci le spaziature tra le aree di contenuto.
- spaziature
C'è un ultimo termine che dobbiamo chiarire prima di andare avanti:
- area grid
Un'area di grid è qualsiasi parte della nostra grid recintata da quattro linee di grid; essa può comprendere qualsiasi numero di celle di grid.
È tempo di costruire questa griglia nel browser! Cominciamo con un po' di markup.
Markup di grid
Per ricreare la griglia sopra, abbiamo bisogno di un elemento contenitore; qualcosa che vi piaccia:
<section class="grid-1"> </section>
In esso porremo nove elementi figlio.
<section class="grid-1"> <div class="item-1">1</div> <div class="item-2">2</div> <div class="item-3">3</div> <div class="item-4">4</div> <div class="item-5">5</div> <div class="item-6">6</div> <div class="item-7">7</div> <div class="item-8">8</div> <div class="item-9">9</div> </section>
Se desiderate seguire fate un fork di questo pen per iniziare. Ho aggiunto alcuni stili di base per differenziare visivamente ogni elemento della griglia.
Regole di grid
In primo luogo abbiamo bisogno di dichiarare che il nostro elemento contenitore è una griglia usando un nuovo valore per la proprietà display
:
.grid-1 { display: grid; }
Bene, è stato facile. Dopo abbiamo bisogno di definire la nostra griglia, dichiarando quanti tracciati di grid avrà, sia orizzontalmente che verticalmente. Facciamo questo con le proprietà grid-template-columns
e grid-template-rows
:
.grid-1 { display: grid; grid-template-columns: 150px 20px 150px 20px 150px; grid-template-rows: auto 20px auto 20px auto; }
Noterete cinque valori per ciascuno. I valori per lo stato grid-template-columns
che "la prima colonna dovrebbe essere ampia 150px, la seconda ampia 20px, la terza 150px", e così via per cinque colonne, più o meno corrispondenti alla nostra immagine della bandiera finlandese. I cinque valori per lo stato grid-template-rows
qualcosa di simile. Ciascuno di essi sarebbe auto
per impostazione predefinita, prendendo l'altezza dal contenuto, ma vogliamo essere più precisi con le nostre spaziature, dando loro 20px
di altezza, quindi abbiamo bisogno di elencare tutte le cinque righe.
Quindi che cosa abbiamo adesso?
Ciascuno dei nostri elementi è stato automaticamente assegnato a un'area della griglia in ordine cronologico. Non è male, ma cos'è successo agli elementi 2, 4 e 7? Sono caduti nelle spaziature verticali, perché le nostre spaziature sono tracciati di grid perfettamente legittimi ed è dove il layout a griglia assumerà che appartengono se non siamo più precisi. È il momento di aggiungere alcune regole ai nostri elementi.
Regole dell'elemento
La sintassi disponibile per noi a questo punto può essere molto complessa, ma stiamo andando a rendere le cose più semplici possibile utilizzando ciò che è in realtà una proprietà abbreviata. Cominceremo con il nostro primo elemento, affermando che lo vogliamo cominciare a grid-column
1 e grid-row
1:
.item-1 { grid-column: 1; grid-row: 1; }
Il nostro elemento riempie automaticamente lo spazio minimo disponibile tra linee della griglia. Il nostro secondo elemento è un po' meno ovvio. Vogliamo anche questo inizi su grid-row
1, ma lo vogliamo che salti grid-column
2 e invece inizi su grid-column
3. La colonna 2 verrà lasciata vuota per formare la nostra spaziatura.
.item-2 { grid-column: 3; grid-row: 1; }
Continuiamo così, saltando le nostre spaziature delle colonne e delle righe, infine terminando con il nostro nono elemento:
.item-9 { grid-column: 5; grid-row: 5; }
Alla fine di tutto ciò, restiamo con una bella griglia ordinata:
Conclusione
È tutto, siete pronti a partire con Grid! Ricapitoliamo i quattro passaggi essenziali:
- Create un elemento contenitore e dichiaratelo
display: grid;
. - Utilizzate quello stesso contenitore per definire i tracciati di grid usando le proprietà
grid-template-columns
egrid-template-rows
. - Posizionate gli elementi figlio all'interno del contenitore.
- Specificate dove ogni figlio appartiene sulla griglia dichiarando il suo
grid-column
egrid-row
.
Nella parte successiva di questa serie daremo uno sguardo più profondo alle sintassi di Grid, miglioreremo il modo in cui definiamo le nostre spaziature, esploreremo i layout flessibili, l'unità fr, la funzione repeat()
e porteremo la nostra semplice griglia più in là. Ci vediamo lì!
Risorse utili per Grid
- @rachelandrew Seguite Rachel Andrew e siete praticamente apposto.
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post