Guida CSS interattiva: CSS Grid

Q: Cosa significa 1fr in CSS grid?

fr è una frazione dello spazio libero nel contenitore grid. grid-template-columns: 1fr 1fr 1fr crea tre colonne uguali, e 1fr 2fr rende la seconda colonna larga il doppio della prima. Prima vengono sottratte le dimensioni fisse e i gap; le colonne fr si dividono quello che resta.

Q: Qual è la differenza tra auto-fill e auto-fit?

Entrambi creano tutte le colonne che ci stanno. auto-fill mantiene le colonne vuote, quindi pochi elementi restano stretti e lasciano spazio vuoto alla fine della riga. auto-fit comprime le colonne vuote, quindi gli elementi si allargano per riempire la riga. Con abbastanza elementi da riempire la riga, i due si comportano allo stesso modo.

Q: Come faccio a far occupare due colonne a un elemento della griglia?

Usa grid-column: span 2 sull'elemento, oppure indica le linee di inizio e fine: grid-column: 1 / 3 copre le colonne 1 e 2. grid-column: 1 / -1 occupa tutta la larghezza, perché -1 è l'ultima linea.

Q: grid-gap e gap sono la stessa cosa?

Sì. grid-gap, grid-row-gap e grid-column-gap sono i nomi vecchi. I browser li accettano ancora come alias, ma scrivi gap, row-gap e column-gap, che funzionano anche in flexbox.

Una griglia in tre righe

Imposta display: grid su un contenitore ed elenca le sue colonne con grid-template-columns. I figli riempiono le celle in ordine, da sinistra a destra in italiano, e una nuova riga comincia ogni volta che le colonne sono piene:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS grid</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr; /* three equal columns */
      gap: 12px;
    }
    .grid div { background: #2563eb; color: white; padding: 16px; border-radius: 6px; }
  </style>
</head>
<body>
  <div class="grid">
    <div>1</div><div>2</div><div>3</div>
    <div>4</div><div>5</div><div>6</div>
    <div>7</div>
  </div>
</body>
</html>

Sette elementi, tre colonne: due righe complete e una terza riga con l'elemento 7 nella prima colonna. Tutte le colonne hanno la stessa larghezza e tutti gli elementi di una riga hanno la stessa altezza, quindi i bordi si allineano in entrambe le direzioni. È questo che grid aggiunge rispetto a flexbox.

Playground della griglia

Scrivi un valore qualsiasi di grid-template-columns, oppure fai clic su un preset. Il riquadro mostra le larghezze delle colonne calcolate dal browser (con getComputedStyle) e quante righe sono servite agli elementi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Grid playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
    .presets button { font: 12px ui-monospace, monospace; padding: 4px 8px; border: 1px solid #111827; background: white; cursor: pointer; }
    #grid { display: grid; gap: 8px; padding: 8px; background: #e5e7eb; }
    #grid div { background: #16a34a; color: white; padding: 10px; text-align: center; }
    pre { white-space: pre-wrap; background: #f3f4f6; padding: 8px; }
  </style>
</head>
<body>
  <label>grid-template-columns: <input id="cols" size="36" value="repeat(3, 1fr)"></label>
  <div class="presets" id="presets"></div>
  <div id="grid"></div>
  <pre id="out"></pre>
  <script>
    const grid = document.getElementById('grid');
    const input = document.getElementById('cols');
    for (let i = 1; i <= 8; i++) grid.insertAdjacentHTML('beforeend', '<div>' + i + '</div>');
    const update = () => {
      grid.style.gridTemplateColumns = input.value;
      const cols = getComputedStyle(grid).gridTemplateColumns;
      const rows = getComputedStyle(grid).gridTemplateRows.split(' ').length;
      document.getElementById('out').textContent =
        'columns: ' + cols + '\n' + cols.split(' ').length + ' columns, ' + rows + ' rows';
    };
    ['repeat(3, 1fr)', '1fr 2fr', '200px 1fr', 'auto 1fr auto', 'repeat(4, 100px)', 'repeat(auto-fill, minmax(120px, 1fr))'].forEach((v) => {
      const b = document.createElement('button');
      b.textContent = v;
      b.addEventListener('click', () => { input.value = v; update(); });
      document.getElementById('presets').append(b);
    });
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Qualche cosa da notare: 1fr 2fr rende la seconda colonna esattamente il doppio della prima. 200px 1fr tiene 200px e dà il resto alla seconda colonna. auto 1fr auto dimensiona le colonne esterne in base al contenuto. repeat(4, 100px) lascia spazio vuoto alla fine perché niente è flessibile. Un valore non valido, come 1fr 2, viene ignorato e la griglia mantiene l'ultimo valore valido.

L'unità fr

fr significa "una quota dello spazio libero". Il browser prima sottrae le colonne fisse (px, rem, %, contenuto auto) e i gap, poi divide quello che resta tra le colonne fr in base ai loro numeri.

`grid-template-columns` in un contenitore di 600px, senza gap	Larghezze delle colonne
`1fr 1fr 1fr`	200, 200, 200
`1fr 2fr`	200, 400
`100px 1fr 1fr`	100, 250, 250
`1fr 50%`	300, 300

fr non è la stessa cosa di %: le percentuali più i gap possono superare il 100% e traboccare, mentre le colonne fr si dividono sempre solo quello che resta dopo i gap.

repeat(), minmax() e una griglia responsive senza media query

repeat(4, 1fr) equivale a 1fr 1fr 1fr 1fr. minmax(120px, 1fr) è una colonna che non è mai più stretta di 120px e cresce per prendere una quota. Mettili insieme con auto-fill o auto-fit al posto di un numero, e la griglia crea tutte le colonne che ci stanno:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

Quella sola dichiarazione crea tante colonne di almeno 180px quante ne entrano nel contenitore: diverse su uno schermo largo, una sul telefono, senza media query. La differenza tra auto-fill e auto-fit si vede quando ci sono meno elementi che colonne:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>auto-fill vs auto-fit</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .g { display: grid; width: 560px; background: #e5e7eb; margin: 4px 0 14px; }
    .fill { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
    .fit { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
    .g div { background: #2563eb; color: white; padding: 10px; outline: 1px solid white; }
  </style>
</head>
<body>
  <code>auto-fill</code>
  <div class="g fill"><div>A</div><div>B</div><div>C</div></div>
  <code>auto-fit</code>
  <div class="g fit"><div>A</div><div>B</div><div>C</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = [...document.querySelectorAll('.g')].map((g) =>
      g.className.split(' ')[1] + ': ' + [...g.children].map((c) => Math.round(c.getBoundingClientRect().width) + 'px').join(', ')
    ).join(' | ');
  </script>
</body>
</html>

Nel contenitore stanno cinque colonne da 100px. auto-fill le mantiene tutte e cinque, quindi A, B e C misurano 112px ciascuno e restano due colonne vuote. auto-fit comprime quelle vuote, quindi i tre elementi si allargano fino a circa 187px ciascuno.

Posizionare gli elementi: grid-column e grid-row

Le linee della griglia sono numerate a partire da 1 dal bordo iniziale. grid-column: 1 / 3 significa "dalla linea 1 alla linea 3", cioè due colonne. span 2 significa "due colonne da dove ti trovi", e -1 è l'ultima linea:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spanning</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 60px; gap: 8px; }
    .grid div { background: #16a34a; color: white; padding: 8px; }
    .grid .wide { grid-column: 1 / -1; background: #111827; }
    .grid .big { grid-column: span 2; grid-row: span 2; background: #2563eb; }
    .grid .tall { grid-row: span 2; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="grid">
    <div class="wide">grid-column: 1 / -1</div>
    <div class="big">span 2 x 2</div>
    <div class="tall">grid-row: span 2</div>
    <div>a</div>
    <div>b</div>
  </div>
</body>
</html>

L'elemento scuro riempie tutta la prima riga. Quello blu copre un blocco 2 per 2, quello ambra due righe. Gli elementi a e b riempiono da soli le celle rimaste: grid mette ogni elemento che può nella prossima cella libera. grid-auto-rows: 60px imposta l'altezza delle righe che non hai dichiarato con grid-template-rows.

grid-template-areas: dai un nome alle parti di un layout

Per il layout di una pagina, dai un nome alle aree e disegnale come testo. Ogni stringa è una riga, ogni parola una cella, e un elemento entra in un'area con grid-area:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Grid areas</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .page {
      display: grid;
      grid-template-columns: 160px 1fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "header header"
        "side   main"
        "footer footer";
      gap: 8px;
      min-height: 280px;
    }
    header { grid-area: header; background: #111827; color: white; }
    aside  { grid-area: side;   background: #e5e7eb; }
    main   { grid-area: main;   background: #bfdbfe; }
    footer { grid-area: footer; background: #111827; color: white; }
    .page > * { padding: 12px; }
  </style>
</head>
<body>
  <div class="page">
    <header>Header</header>
    <aside>Sidebar</aside>
    <main>Main content</main>
    <footer>Footer</footer>
  </div>
</body>
</html>

Header e footer occupano entrambe le colonne perché i loro nomi riempiono le due celle delle rispettive righe. La riga centrale è 1fr, quindi prende l'altezza che resta dei 280px. Per impilare tutto su un telefono, a una media query basta ridisegnare le aree come una sola colonna: grid-template-areas: "header" "side" "main" "footer" con grid-template-columns: 1fr. La pagina sulle media query mostra lo schema.

Allineare dentro le celle

Per impostazione predefinita gli elementi della griglia si allargano per riempire la loro cella. Queste proprietà li spostano al suo interno:

Proprietà	Su	Sposta
`justify-items`	contenitore	tutti gli elementi lungo la riga (asse inline)
`align-items`	contenitore	tutti gli elementi in alto e in basso (asse di blocco)
`place-items`	contenitore	abbreviazione: `place-items: center` centra in entrambi
`justify-self` / `align-self`	elemento	un solo elemento
`justify-content` / `align-content`	contenitore	l'intero insieme di tracce, quando la griglia è più piccola del contenitore

display: grid; place-items: center; è il modo più breve per centrare un figlio in un riquadro.

Grid o flexbox

Grid è bidimensionale: decidi tu le colonne (e le righe) e il contenuto le riempie, quindi ogni card di una galleria ha la stessa larghezza anche nell'ultima riga. Flexbox è monodimensionale: gli elementi prendono la dimensione dal proprio contenuto lungo una sola linea. Si combinano bene: una griglia per la pagina e la galleria di card, flexbox dentro ogni card per la riga dell'intestazione. La pagina su flexbox copre l'altra metà.

Ordine e accessibilità

grid-template-areas, grid-row, grid-column e order possono mettere un elemento ovunque, ma gli screen reader e il tasto Tab seguono comunque l'ordine dell'HTML. Mantieni un ordine del sorgente sensato (header, navigazione, contenuto principale, footer) e usa grid per disporlo, non per correggere un ordine HTML che non ha senso.

Errori comuni

Mettere display: grid sugli elementi. Va sul genitore; solo i figli diretti sono elementi della griglia.
Usare percentuali con i gap. grid-template-columns: 50% 50% più gap: 16px trabocca di 16px. Usa 1fr 1fr.
auto-fill quando volevi auto-fit. Con pochi elementi, auto-fill lascia colonne vuote. Passa ad auto-fit per allargare gli elementi.
Una colonna 1fr che cresce oltre la sua quota. Una colonna 1fr non si restringe sotto il suo contenuto più lungo (un URL lungo, un'immagine larga). Usa minmax(0, 1fr) per permetterle di restringersi.
Stringhe di aree che non sono rettangoli. Ogni area con nome deve formare un rettangolo, e ogni stringa di riga deve avere lo stesso numero di celle, altrimenti l'intera dichiarazione grid-template-areas viene ignorata.
Dimenticare che i numeri di linea partono da 1. Tre colonne hanno quattro linee: 1 / 4 o 1 / -1 le coprono tutte e tre.

Domande frequenti

Cos'è CSS grid?

Un sistema di layout che dispone gli elementi in righe e colonne contemporaneamente. Imposti display: grid su un contenitore, descrivi le sue colonne con grid-template-columns (e, se vuoi, le righe), e i suoi figli diretti riempiono le celle in ordine.

Cosa significa 1fr in CSS grid?

fr è una frazione dello spazio libero nel contenitore grid. grid-template-columns: 1fr 1fr 1fr crea tre colonne uguali, e 1fr 2fr rende la seconda colonna larga il doppio della prima. Prima vengono sottratte le dimensioni fisse e i gap; le colonne fr si dividono quello che resta.

Qual è la differenza tra auto-fill e auto-fit?

Entrambi creano tutte le colonne che ci stanno. auto-fill mantiene le colonne vuote, quindi pochi elementi restano stretti e lasciano spazio vuoto alla fine della riga. auto-fit comprime le colonne vuote, quindi gli elementi si allargano per riempire la riga. Con abbastanza elementi da riempire la riga, i due si comportano allo stesso modo.

Come faccio a far occupare due colonne a un elemento della griglia?

Usa grid-column: span 2 sull'elemento, oppure indica le linee di inizio e fine: grid-column: 1 / 3 copre le colonne 1 e 2. grid-column: 1 / -1 occupa tutta la larghezza, perché -1 è l'ultima linea.

Quando conviene usare grid invece di flexbox?

Usa grid quando righe e colonne devono allinearsi tra loro: gallerie di card, form con etichette allineate, una pagina con header, barra laterale e footer. Usa flexbox per una sola riga o colonna i cui elementi prendono la dimensione dal proprio contenuto, come una barra di navigazione.

grid-gap e gap sono la stessa cosa?

Sì. grid-gap, grid-row-gap e grid-column-gap sono i nomi vecchi. I browser li accettano ancora come alias, ma scrivi gap, row-gap e column-gap, che funzionano anche in flexbox.

Concetti correlati