Layout con CSS Grid: Una guida introduttiva veloce

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:

1. linee di grid
2. colonne
3. righe
4. 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.

1. spaziature

C'è un ultimo termine che dobbiamo chiarire prima di andare avanti:

1. 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:

1. Create un elemento contenitore e dichiaratelo display: grid;.
2. Utilizzate quello stesso contenitore per definire i tracciati di grid usando le proprietà grid-template-columns e grid-template-rows.
3. Posizionate gli elementi figlio all'interno del contenitore.
4. Specificate dove ogni figlio appartiene sulla griglia dichiarando il suo grid-column e grid-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.