CSS Grid Layout – Tutorial per iniziare

È arrivato il momento di prendere contatto con il nuovo CSS Grid Layout (d’ora in poi Grid), il nuovo box model che permette di distribuire gli elementi di una pagina all’interno di un sistema di griglie. Grid nasce dopo l’avvento di Flexbox al quale va ad affiancarsi per ampliare le possibilità creative; Grid quindi non è un sostituto di Flexbox nè si vale il contrario. Come tutte le regole CSS, spesso sono complementari. (verifica qui il supporto attuale dei browser)

Linee di griglia, colonne, righe e celle.

Come viene ben mostrato nell’immagine soprastante ci sono 4 elementi che entrano in gioco quando usi Grid:

1. Le linee di griglia (grid lines) colorate in grigio
2. Le colonne in azzurro
3. Le righe in verde
4. Le celle in arancione

Come creare una griglia?

Immagina di voler creare una griglia con 6 elementi figli. Il primo passo da compiere è quello di impostare come sarà la griglia, definendo quindi righe e colonne tramite le proprietà grid-template-columns e grid-template-rows.

Prendi il seguente codice html e css come esempio:
HTML

<section class="grid-layout">
  <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>
</section>

CSS

.grid-layout {
  display:grid;
  font-family: Arial, sans-serif;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 80px 80px;
}

Otterrai il seguente risultato:

• grid-template-columns: definisce il numero di colonne e la loro larghezza. Nel caso sopra abbiamo scritto 3 volte 100px, quindi 3 è il numero di colonne, 100px è la larghezza di ognunca delle colonne.
• grid-template-rows: definisce il numero di righe (ovviamente devono esserci elementi sufficienti per riempirle) e l’altezza di ogni riga. Nel caso sopra abbiamo 2 righe, alte entrambe 80px.

Disporre gli elementi

Nell’esempio soprastante hai visto come disporre righe e colonne. Immagina di voler cambiare la posizione di alcuni elementi. Come si può fare? Grazie alle proprietà grid-column e grid-row assegnate agli elementi figli è possibile. Per esempio assegnando le seguenti proprietà css:

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

Otterrai la stessa griglia ma avrai spostato gli elementi 1, 2, 3 in posizioni differenti molto rapidamente.

A questo punto puoi provare a fare un esperimento… Provando a rimuovere gli elementi 4,5,6 dal layout, otterrai il tuo primo layout a forma di griglia. Come? Così:

See the Pen oWordG by Davide De Maestri (@gleenk) on CodePen.13441