Prima di CSS Grid, costruire un layout di pagina adeguato significava float, clearfix, margini negativi e una preghiera che le colonne non collassassero. Flexbox ha aiutato, ma è fondamentalmente unidimensionale — si ottiene una riga o una colonna, non entrambe. CSS Grid è il primo sistema di layout nativo del CSS effettivamente progettato per layout bidimensionali. La sfida non è il supporto del browser — è universale dal 2017. La sfida è che l'API ha molta superficie e la denominazione è abbastanza inconsistente da risultare confusa se non si ha il modello sottostante chiaro. Questo articolo si concentra sulle parti che userete nel lavoro reale.

Righe, Colonne e il Contenitore Grid

Tutto inizia con display: grid sul contenitore. Una volta impostato, i figli diretti diventano automaticamente elementi della griglia — non è necessaria nessuna classe su di essi. Si definiscono le tracce di colonne e righe con grid-template-columns e grid-template-rows.

L'unità chiave da capire prima è fr — l'unità frazionaria. Rappresenta una frazione dello spazio disponibile nel contenitore della griglia dopo che le tracce a dimensione fissa sono state calcolate. Un 1fr significa "prendi una quota di qualsiasi spazio rimanga". Due colonne di 1fr 1fr significa metà uguale. 2fr 1fr significa che la prima colonna ottiene il doppio della seconda. Questa è l'unità che rende le griglie fluide naturali.

css
/* 3-column blog card layout */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 1.5rem;
}

/* repeat(3, 1fr) is shorthand for: 1fr 1fr 1fr */
/* auto rows size to their content */

repeat(n, track) è una scorciatoia in modo da non dover scrivere la stessa dimensione di traccia cinque volte. Funziona anche con valori misti: repeat(3, 1fr 2fr) ti dà una griglia a 6 colonne alternando tracce strette e larghe. Per le righe, auto è quasi sempre quello che vuoi — le righe si dimensionano al loro contenuto a meno che tu non abbia bisogno esplicito di un'altezza fissa.

html
<div class="card-grid">
  <article class="card">
    <img src="/posts/grid-post-1.jpg" alt="CSS Grid post 1">
    <h2>Getting Started with Grid</h2>
    <p>A practical intro for developers moving from Flexbox.</p>
  </article>
  <article class="card">
    <img src="/posts/grid-post-2.jpg" alt="CSS Grid post 2">
    <h2>Grid vs Flexbox</h2>
    <p>Which layout tool to reach for, and when.</p>
  </article>
  <article class="card">
    <img src="/posts/grid-post-3.jpg" alt="CSS Grid post 3">
    <h2>Responsive Grids Without Media Queries</h2>
    <p>Using minmax() to handle reflow automatically.</p>
  </article>
</div>

La Proprietà gap

Prima di Grid, aggiungere spaziatura tra i figli del layout significava margini — e i margini significavano ricordare di resettare l'ultimo figlio, gestire il collasso e aggiungere margini negativi sul contenitore per compensare. gap risolve questo in modo pulito. Aggiunge spazio solo tra le tracce, mai sui bordi esterni della griglia.

css
/* Uniform gap between all rows and columns */
.card-grid {
  gap: 1.5rem;
}

/* Different row and column gaps */
.dashboard {
  row-gap: 2rem;
  column-gap: 1rem;
}

/* gap is shorthand: row-gap then column-gap */
.dashboard {
  gap: 2rem 1rem;
}
Nota: gap funziona anche in Flexbox (ha sostituito il vecchio alias grid-gap). Se stai già usando Flexbox per un componente e hai solo bisogno di spaziatura tra gli elementi, puoi usare gap lì senza passare a Grid.

Posizionamento Esplicito degli Elementi

Per impostazione predefinita, gli elementi della griglia scorrono nella cella disponibile successiva nell'ordine sorgente. Ma il vero potere di Grid è che puoi posizionare gli elementi ovunque — e persino farli coprire più tracce. Le proprietà sono grid-column e grid-row, che fanno riferimento alle linee della griglia (le linee tra le tracce, numerate da 1).

css
/* Dashboard where the first card spans 2 columns */
.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.card--featured {
  grid-column: 1 / 3;   /* start at line 1, end at line 3 */
}

/* span keyword: simpler when you don't care about exact position */
.card--featured {
  grid-column: span 2;  /* occupy 2 column tracks from wherever it lands */
}

/* Spanning rows too */
.card--tall {
  grid-row: span 2;     /* occupy 2 row tracks */
}

/* Explicit positioning: place a panel in column 3-5, row 1-2 */
.sidebar {
  grid-column: 3 / 5;
  grid-row: 1 / 2;
}

I numeri di linea iniziano da 1 per il bordo sinistro/superiore e vanno fino a n+1 dove n è il numero di tracce. I numeri di linea negativi contano dal basso/destra: grid-column: 1 / -1 estende un elemento sull'intera larghezza della griglia indipendentemente dal numero di colonne — un trucco utile per elementi a larghezza intera all'interno di un contenitore multi-colonna.

grid-template-areas — Dai un Nome al Layout

Questa è la funzionalità che rende Grid genuinamente eccellente per i layout a livello di pagina, ed è l'API più leggibile di tutto il CSS. Invece di posizionare gli elementi per numeri di linea, disegni il layout come arte ASCII nel CSS, poi dici a ogni elemento quale area denominata occupa. La specifica grid-template-areas richiede che ogni riga abbia lo stesso numero di celle, e ogni area denominata deve essere rettangolare — nessuna forma a L.

css
/* Full page layout: header, sidebar, main, footer */
.page-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 60px 1fr 50px;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
  gap: 0;
}

.page-header  { grid-area: header; }
.page-sidebar { grid-area: sidebar; }
.page-main    { grid-area: main; }
.page-footer  { grid-area: footer; }
html
<div class="page-shell">
  <header class="page-header">Site header / nav</header>
  <nav class="page-sidebar">Sidebar navigation</nav>
  <main class="page-main">Primary content</main>
  <footer class="page-footer">Footer</footer>
</div>

Un punto (.) nella stringa del template lascia una cella intenzionalmente vuota. Puoi anche impilare lo stesso nome su più celle per coprirle — è esattamente ciò che fa "header header" sopra. Quando si ridimensiona o si ristruttura il layout per diversi viewport, si aggiorna la stringa del template in un unico posto invece di cercare tra più dichiarazioni grid-column.

auto-fill vs auto-fit con minmax()

Il pattern alla base delle griglie responsive senza media query è uno dei trucchi più pratici di Grid: repeat(auto-fill, minmax(250px, 1fr)). Analizzato — minmax(250px, 1fr) dice che ogni colonna deve essere larga almeno 250px ma può espandersi per riempire lo spazio disponibile. auto-fill dice a Grid di creare quante più colonne possibili nel contenitore data quella limitazione. Il risultato è una griglia che guadagna e perde automaticamente colonne al variare del viewport.

css
/* Product card grid — reflows automatically, no media queries */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

/* auto-fit collapses empty tracks — items stretch to fill the container */
.product-grid--stretch {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

La differenza tra auto-fill e auto-fit è sottile ma conta quando ci sono meno elementi che colonne. Con auto-fill, Grid riserva spazio per le tracce potenziali anche se vuote — gli elementi rimangono alla loro larghezza minima. Con auto-fit, le tracce vuote collassano a zero e gli elementi si espandono per riempire la riga. Per griglie di prodotti e gallerie dove vuoi che gli elementi usino lo spazio disponibile, auto-fit di solito appare meglio. Per griglie dove la larghezza degli elementi costante conta più del riempimento del contenitore, auto-fill è la scelta giusta.

Nota sul supporto browser: auto-fill e auto-fit con minmax() hanno un ottimo supporto — 97%+ globalmente secondo caniuse. Puoi usare questo pattern oggi senza un fallback in qualsiasi progetto moderno.

Allineamento in Grid

Grid usa lo stesso modulo di allineamento Box di Flexbox, quindi i nomi delle proprietà corrispondono direttamente se conosci già Flexbox. Il modello mentale chiave: justify opera sull'asse inline (orizzontale nella maggior parte delle modalità di scrittura), align opera sull'asse a blocchi (verticale).

  • justify-items / align-items — allineamento predefinito per tutti gli elementi nella loro cella della griglia. Il default è stretch, motivo per cui gli elementi della griglia riempiono automaticamente la loro cella.
  • justify-content / align-content — distribuisce le tracce stesse all'interno del contenitore quando la griglia è più piccola del contenitore (simile a Flexbox justify-content sul contenitore flex).
  • justify-self / align-self — sovrascrive l'allineamento per un singolo elemento. Utile quando un elemento deve essere centrato mentre gli altri si estendono.
  • Valori: start, end, center, stretch, space-between, space-around, space-evenly (ultimi tre solo per *-content).
css
/* Center all card content within its cell */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;     /* cards align to their cell top, not stretched */
  gap: 1.5rem;
}

/* Center a single call-to-action card both ways */
.card--cta {
  justify-self: center;
  align-self: center;
}

/* Distribute tracks with space between — useful for nav bars */
.nav-grid {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: space-between;
}

Se vieni da Flexbox, la differenza principale è che l'allineamento Grid opera su uno spazio bidimensionale — puoi controllare entrambi gli assi simultaneamente. In Flexbox, l'allineamento dell'asse trasversale si applica a un'intera riga o colonna di elementi; in Grid, ogni elemento ha la propria cella, quindi justify-self e align-self ti danno il controllo per elemento senza necessità di elementi wrapper.

Layout Reale: Shell Dashboard Completo

Ecco una struttura di pagina CSS Grid completa per un'applicazione dashboard — intestazione, nav sidebar retraibile, area del contenuto principale con la propria griglia interna e piè di pagina. Questo è il pattern che useresti come shell di layout più esterno per un dashboard SaaS o un pannello di amministrazione.

css
/* ── Dashboard shell ──────────────────────────────────── */
.dashboard-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: 56px 1fr 44px;
  grid-template-areas:
    "topbar  topbar"
    "sidenav content"
    "sidenav footer";
  min-height: 100vh;
}

.dashboard-topbar  { grid-area: topbar;  background: #1e293b; }
.dashboard-sidenav { grid-area: sidenav; background: #0f172a; overflow-y: auto; }
.dashboard-content { grid-area: content; padding: 1.5rem; overflow-y: auto; }
.dashboard-footer  { grid-area: footer;  background: #f8fafc; border-top: 1px solid #e2e8f0; }

/* ── Collapsed sidebar variant ────────────────────────── */
.dashboard-shell--collapsed {
  grid-template-columns: 56px 1fr;
}

/* ── Content area — internal card grid ─────────────────── */
.dashboard-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-template-rows: auto;
  align-content: start;
  gap: 1.25rem;
}

/* Stat cards take one column each; the main chart spans all */
.stat-card  { /* auto-placed, one column */ }
.main-chart { grid-column: 1 / -1; }   /* always full width */

/* ── Responsive: collapse to single-column on small screens */
@media (max-width: 768px) {
  .dashboard-shell {
    grid-template-columns: 1fr;
    grid-template-rows: 56px 1fr auto 44px;
    grid-template-areas:
      "topbar"
      "content"
      "sidenav"
      "footer";
  }
}
html
<div class="dashboard-shell">
  <header class="dashboard-topbar">
    <a href="/dashboard" class="brand">AppName</a>
    <nav class="topbar-actions">
      <button class="btn-icon" aria-label="Notifications">
        <span class="icon-bell"></span>
      </button>
      <img src="/avatar/user.png" class="user-avatar" alt="User menu">
    </nav>
  </header>

  <nav class="dashboard-sidenav">
    <ul>
      <li><a href="/dashboard">Overview</a></li>
      <li><a href="/dashboard/analytics">Analytics</a></li>
      <li><a href="/dashboard/users">Users</a></li>
      <li><a href="/dashboard/settings">Settings</a></li>
    </ul>
  </nav>

  <main class="dashboard-content">
    <div class="stat-card">Monthly Revenue</div>
    <div class="stat-card">Active Users</div>
    <div class="stat-card">Churn Rate</div>
    <div class="main-chart">Revenue Chart (full width)</div>
  </main>

  <footer class="dashboard-footer">
    <p>AppName v2.4.1 &mdash; <a href="/status">System Status</a></p>
  </footer>
</div>

Alcune cose degne di nota in questo esempio. Il piè di pagina è posizionato nella colonna sidenav sugli schermi grandi usando la definizione dell'area del template, il che lo mantiene visivamente separato dall'area del contenuto principale con scorrimento. 1fr sulle righe e overflow-y: auto sul riquadro del contenuto significa che l'area del contenuto scorre indipendentemente — la topbar e la sidenav rimangono fisse, che è la UX standard dei dashboard. La query @media in fondo riordina le aree della griglia per mobile senza toccare l'HTML.

Conclusione

La curva di apprendimento di CSS Grid deriva principalmente dalla denominazione — linee, tracce, aree, unità fr — ma una volta che il modello si fa chiaro, è notevolmente diretto. Per i layout reali: usa grid-template-areas per le shell di pagina (si legge come un wireframe), usa repeat(auto-fit, minmax()) per le griglie di schede responsive, e usa grid-column: span N esplicito per gli elementi che rompono il flusso standard. Non hai bisogno di tutta l'API di Grid per il 90% del lavoro reale — questi pattern ne coprono la maggior parte.

Per ulteriori letture: la Guida Completa a Grid di CSS-Tricks è il miglior riferimento a pagina singola; la documentazione MDN su CSS Grid approfondisce ogni proprietà; e la specifica W3C CSS Grid Level 1 è sorprendentemente leggibile se vuoi capire il comportamento esatto dei casi limite. La compatibilità del browser è eccellente — controlla caniuse.com/css-grid per i numeri attuali. Se stai lavorando su un progetto live e vuoi riordinare il tuo CSS, il CSS Formatter su questo sito riordinerà e abbellirà i tuoi fogli di stile.

← All CSS articles Browse all categories →