grid-column e grid-row: posizionamento e spanning esplicito

Di default, quando definisci un contenitore CSS Grid, il browser prende gli elementi figli (HTML) e li posiziona in sequenza uno dopo l’altro (prima riga, da sinistra a destra, poi seconda riga, ecc.), occupando ciascuno esattamente 1 cella.

Ma con Grid puoi scavalcare questo ordine e dire a un elemento: “Tu non sei una cella piccola, tu devi allargarti e occupare 3 colonne intere!”.

Lo facciamo usando le proprietà grid-column e grid-row applicate ai singoli elementi figli.

Le “Linee” della Griglia

Per posizionare un elemento, devi immaginare la tua griglia non come “stanze”, ma come linee divisorie (come i muri delle stanze).

Se hai una griglia con 3 colonne, avrai 4 linee verticali:

• Linea 1 (il muro a sinistra estrema)
• Linea 2 (il primo divisorio interno)
• Linea 3 (il secondo divisorio interno)
• Linea 4 (il muro a destra estrema)

Espandersi su più colonne (Spanning)

Vogliamo creare un header che occupi tutta la parte alta del sito (le prime 3 colonne).

Applicando grid-column all’header, gli indichiamo la linea di partenza e la linea di arrivo, separate da uno slash /.

.header {
  /* Inizia dalla Linea 1 e fermati alla Linea 4 */
  grid-column: 1 / 4;
}

Se non vuoi fare i conti mentali delle linee, esiste una parola chiave utilissima chiamata span (che significa “estenditi per”).

.header {
  /* "Parti da dove saresti normalmente, ma occupati lo spazio di 3 colonne" */
  grid-column: span 3;
}

Il trucco del -1

Se vuoi che un elemento inizi dalla prima linea e finisca sempre e in ogni caso all’ultima linea a destra (indipendentemente da quante colonne ci sono), puoi usare -1. -1 in CSS Grid significa “l’ultima linea della griglia”.

.footer {
  /* Occupa tutta la larghezza da inizio a fine! */
  grid-column: 1 / -1; 
}

Sovrapporre elementi (Senza Position Absolute)

Prima dell’invenzione di Grid, sovrapporre due immagini, o mettere un testo perfettamente sopra un’immagine richiedeva l’uso disordinato di position: absolute.

Con Grid, è semplicissimo. Ti basta dire a due figli diversi di occupare esattamente la stessa cella!

<div class="card-hero">
  <img src="sfondo.jpg" class="sfondo">
  <h1 class="titolo">Benvenuto</h1>
</div>

.card-hero {
  display: grid;
  /* Griglia 1x1 */
  grid-template-columns: 1fr;
}

.sfondo, .titolo {
  /* Diciamo a entrambi di occupare la riga 1, colonna 1! */
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

/* Poi per sicurezza, diamo al titolo una z-index per tenerlo visivamente sopra */
.titolo {
  z-index: 10;
  align-self: center; /* e lo centriamo verticalmente! */
}

Imparare a muovere e far espandere gli oggetti sulle linee di grid-column è la chiave per riprodurre layout complessi, come riviste o bacheche fotografiche.