Proprietà CSS grid-template

La proprietà CSS grid-template definisce righe, colonne e aree con nome di una CSS Grid in un'unica dichiarazione. È una proprietà abbreviata per tre proprietà estese:

grid-template-rows — l'altezza di ciascuna traccia di riga.
grid-template-columns — la larghezza di ciascuna traccia di colonna.
grid-template-areas — regioni con nome in cui è possibile posizionare gli elementi tramite grid-area.

Questa pagina spiega la sintassi, come la barra obliqua separa le righe dalle colonne, come funziona la forma con aree con nome, quando usare grid-template invece della più ampia proprietà abbreviata grid, e mostra esempi eseguibili modificabili in tempo reale.

Come funziona la proprietà abbreviata

grid-template si applica solo a un contenitore grid — un elemento con display: grid (o inline-grid). La proprietà ha due forme principali.

Forma righe / colonne

Inserisci prima le dimensioni delle righe, poi una barra obliqua (/), poi le dimensioni delle colonne:

.container {
  display: grid;
  grid-template: 100px 200px / 1fr 1fr 1fr; /* two rows / three columns */
}

Il carattere / è obbligatorio quando si specificano sia righe che colonne — indica al browser dove inizia l'elenco delle colonne. Le dimensioni possono usare qualsiasi unità per il dimensionamento delle tracce:

Unità	Significato
`px`, `%`, `em`	Dimensioni fisse o relative
`fr`	Una frazione dello spazio libero rimanente
`auto`	Dimensionato dal contenuto, poi distribuisce lo spazio rimanente
`min-content`	Dimensione minima che evita l'overflow
`max-content`	Dimensione massima senza andare a capo
`minmax(min, max)`	Un intervallo — es. `minmax(100px, 1fr)`
`repeat(n, size)`	Ripete una traccia `n` volte — es. `repeat(3, 1fr)`

L'unità fr è esclusiva del layout grid. 1fr 2fr significa "una parte e due parti dello spazio libero" — quindi la seconda traccia è larga il doppio della prima.

Forma con aree con nome

Ogni stringa tra virgolette rappresenta una riga. Le parole all'interno della stringa nominano le celle in quella riga. Le celle che condividono lo stesso nome su più righe si uniscono in un'unica area rettangolare. Un punto (.) lascia una cella senza nome:

.container {
  display: grid;
  grid-template:
    "header header" 60px
    "nav    main"   1fr
    / 120px 1fr;
}

La dimensione della riga (es. 60px, 1fr) è scritta dopo la stringa tra virgolette, prima della stringa successiva. Le eventuali dimensioni delle colonne vengono dopo il / finale.

Puoi quindi posizionare gli elementi nelle aree con nome usando grid-area:

header { grid-area: header; }
nav    { grid-area: nav; }
main   { grid-area: main; }

Questo è il modo più leggibile per descrivere un layout di pagina classico in CSS.

Informazione

grid-template non imposta il margine tra le tracce. Usa gap (o la proprietà estesa column-gap) per la spaziatura tra le tracce. I margini sono separati dal dimensionamento delle tracce.

grid-template vs. grid

La più ampia proprietà abbreviata grid reimposta anche le proprietà della griglia implicita — grid-auto-rows, grid-auto-columns e grid-auto-flow — ai loro valori iniziali. grid-template lascia queste proprietà invariate.

Quando usare ciascuna:

Usa grid-template quando vuoi definire solo le tracce e le aree esplicite senza influenzare il comportamento del posizionamento automatico.
Usa grid quando vuoi reimpostare tutte le proprietà grid in una sola volta.

Riferimento alla proprietà

Caratteristica	Valore
Valore iniziale	`none`
Si applica a	Contenitori grid
Ereditato	No
Animabile	Sì — le dimensioni delle tracce sono animabili
Specifica	CSS Grid Layout Module Level 1

Sintassi

grid-template: none
             | <grid-template-rows> / <grid-template-columns>
             | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
             | initial | inherit | unset;

Valori

Valore	Descrizione
`none`	Reimposta tutte e tre le proprietà estese (`grid-template-rows`, `grid-template-columns`, `grid-template-areas`) ai loro valori iniziali. Gli elementi vengono posizionati dall'algoritmo di posizionamento automatico.
`<rows> / <columns>`	Imposta tracce di righe e colonne esplicite. Qualsiasi unità di dimensionamento è valida: `px`, `%`, `fr`, `auto`, `minmax()`, `repeat()`, ecc.
`"area-names" <size>`	Imposta aree con nome riga per riga. Ogni stringa tra virgolette è una riga; la dimensione opzionale dopo di essa è l'altezza di quella riga.
`initial`	Reimposta la proprietà a `none`.
`inherit`	Eredita il valore calcolato dall'elemento padre.
`unset`	Si comporta come `inherit` se la proprietà è ereditabile, altrimenti come `initial`.

Esempi

Definire righe e colonne

Questa griglia ha una riga esplicita di 170px e tre colonne dimensionate con auto. Gli elementi oltre la prima riga vengono inseriti in righe create implicitamente.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template: 170px / auto auto auto;
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Provalo tu stesso »

Risultato:

Utilizzo di aree con nome

Qui il primo elemento riceve il nome item1 tramite grid-area. Le due stringhe tra virgolette posizionano item1 in un blocco 2×2 in alto a sinistra. I punti (.) contrassegnano le celle vuote in cui vengono inseriti gli elementi rimanenti.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        grid-area: item1;
      }
      .grid-container {
        display: grid;
        grid-template: 'item1 item1 . .' 'item1 item1 . .';
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template property example</h2>
    <div class="grid-container">
      <div class="box">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Provalo tu stesso »

Layout di pagina con aree con nome

Un classico layout a tre sezioni — intestazione, barra laterale e contenuto — definito in un'unica dichiarazione grid-template:

<!DOCTYPE html>
<html>
  <head>
    <title>Named area layout</title>
    <style>
      .page {
        display: grid;
        grid-template:
          "header  header"  60px
          "sidebar content" 1fr
          "footer  footer"  40px
          / 160px 1fr;
        gap: 8px;
        height: 300px;
      }
      .page > * {
        background: #dde;
        padding: 8px;
        font-family: sans-serif;
      }
      .hdr  { grid-area: header; }
      .side { grid-area: sidebar; }
      .main { grid-area: content; }
      .ftr  { grid-area: footer; }
    </style>
  </head>
  <body>
    <div class="page">
      <div class="hdr">Header</div>
      <div class="side">Sidebar</div>
      <div class="main">Content</div>
      <div class="ftr">Footer</div>
    </div>
  </body>
</html>

Il layout è completamente definito in un'unica proprietà: tre righe (60 px / flessibile / 40 px) e due colonne (barra laterale da 160 px / contenuto flessibile). Non sono necessari attributi grid-column o grid-row — i nomi fanno tutto il lavoro.

Errori comuni

Le aree devono formare un rettangolo. Non è possibile creare un'area con nome a forma di L o di T. Se ci si prova, la dichiarazione non è valida e il browser la ignora.

Il numero di righe deve corrispondere. Il numero di celle in ogni stringa tra virgolette deve essere uguale. "a b" seguito da "a b c" non è valido.

grid-template reimposta le tre proprietà estese. Impostare grid-template: 1fr / 1fr imposta implicitamente grid-template-areas: none — qualsiasi area con nome precedentemente impostata viene rimossa.

Le tracce implicite non sono interessate. grid-template controlla solo la griglia esplicita. Gli elementi aggiuntivi che superano le righe e le colonne definite vengono inseriti in tracce implicite, dimensionate da grid-auto-rows e grid-auto-columns.

Supporto browser

grid-template fa parte del CSS Grid Layout Module Level 1 ed è supportato da tutti i browser moderni (Chrome 57+, Edge 16+, Firefox 52+, Safari 10.1+, Opera 44+). Non ha effetto sugli elementi che non sono contenitori grid — abbinarlo sempre a display: grid.

Esercitazione

Pratica

Cosa fa la proprietà CSS grid-template?

Permette di definire righe, colonne e aree con nome per un contenitore grid in un'unica dichiarazione.Viene utilizzata per allineare il contenuto all'interno di un elemento grid.È una proprietà abbreviata per grid-template-rows, grid-template-columns e grid-template-areas.Cambia il colore di sfondo di un contenitore grid.