CSS Grid

Introduzione

CSS Grid è il sistema di layout bidimensionale di CSS. A differenza di Flexbox — che gestisce una sola direzione alla volta — Grid gestisce contemporaneamente righe e colonne, rendendolo ideale per layout di pagina completi, dashboard e gallerie.

Terminologia

Prima di scrivere codice Grid è utile conoscere il vocabolario della specifica CSS. Questi concetti torneranno in ogni proprietà che incontrerai.

Grid Container

L'elemento sul quale si applica display: grid. Diventa il contesto della griglia e rende tutti i suoi figli diretti dei grid items.

Grid Items

I figli diretti del grid container. Gli elementi più in profondità (nipoti, ecc.) non sono grid items — a meno che non abbiano anch'essi display: grid.

<div class="container">    <!-- grid container -->
  <div>Item 1</div>         <!-- grid item ✓ -->
  <div>                     <!-- grid item ✓ -->
    <p>Testo annidato</p>   <!-- NON è un grid item ✗ -->
  </div>
  <div>Item 3</div>         <!-- grid item ✓ -->
</div>

Grid Lines

Le linee verticali e orizzontali che formano la struttura della griglia. Sono numerate a partire da 1. Le column lines (blu) scorrono verticalmente; le row lines (verde) orizzontalmente.

Grid Tracks

Lo spazio tra due linee di griglia adiacenti. Una track corrisponde a una colonna o a una riga della griglia.

Grid Cell

La più piccola unità della griglia: lo spazio racchiuso tra 4 linee adiacenti (due di colonna e due di riga).

Grid Area

Uno spazio rettangolare delimitato da 4 linee di griglia. Può occupare una o più celle ed è il target della proprietà grid-area.

Il Contenitore Grid

Si applica display: grid all'elemento padre. Tutti i figli diretti diventano automaticamente grid items senza classi aggiuntive.

/* Crea il contesto grid */
.container {
  display: grid;
}

Il primo gruppo non ha display: grid — gli elementi si impilano in verticale. Prova ad aggiungerlo nel CSS e osserva la differenza immediata.

<p class="label">Without grid</p>
<div class="without-grid">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>

<p class="label">With display: grid</p>
<div class="with-grid">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>

Colonne e Righe

grid-template-columns definisce quante colonne ci sono e quanto sono larghe. grid-template-rows fa lo stesso per le righe.repeat(N, value) evita di ripetere lo stesso valore N volte.

/* 3 colonne uguali */
grid-template-columns: repeat(3, 1fr);

/* 3 colonne con misure diverse */
grid-template-columns: 100px 1fr 2fr;

/* Altezze delle righe fisse */
grid-template-rows: 80px 60px;

Prova a modificare grid-template-columns e grid-template-rowse osserva come cambiano le celle.

<div class="grid">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

Il Gap

gap aggiunge spazio tra le celle — mai attorno all'intera griglia. È la scorciatoia per row-gap e column-gap.

gap: 16px;        /* uguale in tutte le direzioni */
gap: 8px 24px;    /* righe | colonne */
row-gap: 8px;
column-gap: 24px;

Prova i valori suggeriti nel commento: gap: 4px, gap: 40px, oppure gap: 8px 32px per spaziatura asimmetrica.

<div class="grid">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box">E</div>
  <div class="box">F</div>
</div>

L'Unità fr

fr (fraction) rappresenta una frazione dello spazio disponibiledopo aver assegnato le misure fisse. 1fr 1fr crea due colonne uguali.1fr 3fr crea una sidebar piccola e un contenuto tre volte più largo.

grid-template-columns: 1fr 1fr 1fr; /* colonne uguali */
grid-template-columns: 1fr 3fr;     /* sidebar + main */
grid-template-columns: 200px 1fr;   /* fisso + flessibile */

Modifica i valori nelle tre griglie e osserva come si ridistribuisce lo spazio.

<p class="label">1fr 1fr 1fr — equal columns</p>
<div class="g1">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>

<p class="label">1fr 3fr — sidebar + main</p>
<div class="g2">
  <div class="box">Sidebar</div>
  <div class="box">Main content</div>
</div>

<p class="label">200px 1fr 1fr — fixed + flexible</p>
<div class="g3">
  <div class="box">200px</div>
  <div class="box">1fr</div>
  <div class="box">1fr</div>
</div>

Grid Areas

grid-template-areas permette di disegnare il layout con del testo: ogni stringa è una riga, ogni parola è una cella. Poi ogni elemento dichiara la propria area con grid-area.

.page {
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
}

.page-header  { grid-area: header; }
.page-sidebar { grid-area: sidebar; }
.page-main    { grid-area: main; }
.page-footer  { grid-area: footer; }

Prova a spostare la sidebar a destra cambiando le aree in "header header" "main sidebar" "footer footer".

<div class="page">
  <header class="page-header">Header</header>
  <aside class="page-sidebar">Sidebar</aside>
  <main class="page-main">Main</main>
  <footer class="page-footer">Footer</footer>
</div>

Posizionare gli Elementi

Ogni item può occupare più celle con grid-column e grid-row. Si indica la linea di partenza e quella di arrivo, oppure si usa span Nper occupare N celle.

grid-column: 1 / 3;    /* dalla linea 1 alla linea 3 */
grid-column: span 2;   /* occupa 2 colonne */
grid-column: 1 / -1;   /* dall'inizio alla fine della griglia */
grid-row: span 2;      /* occupa 2 righe */

Sperimenta modificando i valori di span e grid-columndegli elementi colorati.

<div class="grid">
  <div class="box span-two">span 2 columns</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box span-tall">2 rows</div>
  <div class="box full-width">Full width (1 / -1)</div>
</div>

auto-fill e auto-fit

Con repeat(auto-fit, minmax(...)) il browser calcola automaticamente quante colonne ci stanno — senza media query. È il pattern più usato per griglie responsive.

/* le colonne esistenti crescono per riempire lo spazio */
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

/* mantiene lo spazio riservato per colonne vuote */
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

Prova a cambiare il valore di minmax — più è grande, meno colonne entrano.

<p class="label">auto-fit — columns grow to fill space</p>
<div class="auto-fit">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>

<p class="label">auto-fill — keeps space for empty columns</p>
<div class="auto-fill">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>

Esercizi