Proprietà CSS grid Shorthand — Guida Completa

La proprietà CSS grid è una shorthand che consente di definire un intero layout CSS Grid in una singola dichiarazione. Imposta le seguenti sei sotto-proprietà contemporaneamente sul grid container:

grid-template-rows — altezze delle righe esplicite
grid-template-columns — larghezze delle colonne esplicite
grid-template-areas — regioni con nome del layout
grid-auto-rows — altezza delle righe create implicitamente
grid-auto-columns — larghezza delle colonne create implicitamente
grid-auto-flow — direzione in cui vengono aggiunti gli elementi posizionati automaticamente

La proprietà grid si applica solo a un grid container — un elemento con display: grid o display: inline-grid.

Importante: Qualsiasi sotto-proprietà non menzionata in una dichiarazione grid viene reimpostata al suo valore iniziale. Questa è la differenza fondamentale rispetto all'impostazione delle sotto-proprietà individualmente — grid parte sempre da uno stato pulito.

Tracce esplicite vs. implicite

Comprendere questa distinzione è fondamentale per leggere qualsiasi valore grid:

Tracce esplicite sono le righe e le colonne che definisci manualmente. Il / nel valore separa le righe (a sinistra) dalle colonne (a destra): grid: 100px 200px / 1fr 1fr significa due righe esplicite e due colonne esplicite.
Tracce implicite sono le righe o colonne extra che il browser crea automaticamente quando ci sono più elementi di quanti la griglia esplicita possa contenere. grid-auto-rows / grid-auto-columns ne impostano le dimensioni, e grid-auto-flow decide se l'overflow va in nuove righe (il comportamento predefinito) o in nuove colonne.

Puoi specificare o le proprietà esplicite o quelle implicite in una singola shorthand grid — non entrambe contemporaneamente.

L'unità `fr`

I layout CSS Grid utilizzano frequentemente fr (unità frazionale). 1fr significa "una quota dello spazio disponibile". Tre colonne definite come 1fr 1fr 1fr ricevono ciascuna un terzo della larghezza del container. Puoi anche combinare fr con dimensioni fisse: 200px 1fr assegna alla prima colonna 200 px e alla seconda colonna tutto lo spazio rimanente.

Sintassi

/* Keyword */
grid: none;

/* Explicit rows / columns */
grid: <grid-template-rows> / <grid-template-columns>;

/* Template areas */
grid: <grid-template>;

/* Implicit rows, explicit columns */
grid: [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>;

/* Explicit rows, implicit columns */
grid: <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>?;

/* Global values */
grid: inherit;
grid: initial;
grid: unset;

La notazione && indica che entrambe le keyword devono essere presenti; il loro ordine non è rilevante. Il ? indica che il termine è opzionale.

Valore iniziale	`none`
Si applica a	Grid container
Ereditato	No
Animabile	Sì (il layout CSS Grid è animabile)
Versione CSS	CSS Grid Layout Module Level 1
Sintassi DOM	`element.style.grid = "100px / 1fr 1fr"`

Forme di valore

Valore	Cosa fa
`none`	Rimuove qualsiasi template esplicito; tutte le sotto-proprietà vengono reimpostate ai valori iniziali.
`<template-rows> / <template-columns>`	Imposta le tracce esplicite di righe e colonne.
`<grid-template>`	Shorthand per `grid-template-rows`, `grid-template-columns` e `grid-template-areas`.
`<template-rows> / auto-flow [dense] [<auto-cols>]`	Righe esplicite; le colonne vengono generate automaticamente. Aggiungi `dense` per riempire i vuoti.
`auto-flow [dense] [<auto-rows>] / <template-cols>`	Le righe vengono generate automaticamente; le colonne sono esplicite.
`initial`	Reimposta la proprietà al suo valore predefinito (`none`).
`inherit`	Eredita il valore calcolato dall'elemento padre.

Esempi

Esempio 1: Griglia esplicita di base

grid: 100px / auto auto auto crea una riga esplicita (alta 100 px) e tre colonne auto di larghezza uguale. I nove riquadri traboccano in righe implicite aggiuntive (dimensionate automaticamente):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid: 100px / auto auto auto;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-box {
        background-color: #eee;
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 30px;
        font-size: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box">1</div>
      <div class="grid-box">2</div>
      <div class="grid-box">3</div>
      <div class="grid-box">4</div>
      <div class="grid-box">5</div>
      <div class="grid-box">6</div>
      <div class="grid-box">7</div>
      <div class="grid-box">8</div>
      <div class="grid-box">9</div>
    </div>
  </body>
</html>

Provalo tu stesso »

Esempio 2: Auto-flow nelle colonne

grid: auto auto / auto-flow imposta due righe esplicite e indica al browser di generare le colonne automaticamente man mano che posiziona gli elementi. Ogni elemento scorre in una nuova colonna finché tutti gli elementi sono posizionati, riempiendo entrambe le righe colonna per colonna.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid: auto auto / auto-flow;
        gap: 5px;
        background-color: #1c87c9;
        padding: 10px;
      }
      .grid-container > div {
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box1">1</div>
      <div class="grid-box2">2</div>
      <div class="grid-box3">3</div>
      <div class="grid-box4">4</div>
    </div>
  </body>
</html>

Provalo tu stesso »

Esempio 3: Posizionamento esplicito degli elementi con `grid-area`

Ogni riquadro viene posizionato con grid-area usando la sintassi row-start / column-start / row-end / column-end sopra un template grid: 100px / auto auto auto:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .grid-box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .grid-box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .grid-box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .grid-box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .grid-box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .grid-container {
        display: grid;
        grid: 100px / auto auto auto;
        gap: 10px;
        background-color: #1c87c9;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box1">1</div>
      <div class="grid-box2">2</div>
      <div class="grid-box3">3</div>
      <div class="grid-box4">4</div>
      <div class="grid-box5">5</div>
      <div class="grid-box6">6</div>
    </div>
  </body>
</html>

Provalo tu stesso »

Esempio 4: Unità `fr` per colonne flessibili

L'uso delle unità fr è il pattern più comune per le griglie responsive. Le tre colonne seguenti ricevono ciascuna una quota uguale della larghezza disponibile e si restringono o si espandono insieme:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid: auto / 1fr 1fr 1fr;
        gap: 10px;
        background-color: #1c87c9;
        padding: 10px;
      }
      .grid-container > div {
        background-color: rgba(255, 255, 255, 0.9);
        text-align: center;
        padding: 20px;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Three equal columns with fr units</h2>
    <div class="grid-container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
    </div>
  </body>
</html>

La regola grid: auto / 1fr 1fr 1fr è equivalente alla versione più verbosa:

grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr;
/* all other grid sub-properties reset to initial */

Esempio 5: Aree template con nome

La shorthand grid supporta direttamente la sintassi di grid-template-areas. Ogni stringa tra virgolette rappresenta una riga; ogni parola al suo interno è il nome di un'area. Un . (punto) indica una cella vuota.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .layout {
        display: grid;
        grid:
          "header header header" 60px
          "sidebar main   main"  1fr
          "footer footer footer" 40px
          / 160px 1fr 1fr;
        gap: 8px;
        height: 260px;
        background-color: #ccc;
        padding: 8px;
      }
      .header  { grid-area: header;  background: #1c87c9; color: #fff; display: flex; align-items: center; justify-content: center; }
      .sidebar { grid-area: sidebar; background: #8ecae6; display: flex; align-items: center; justify-content: center; }
      .main    { grid-area: main;    background: #eee;    display: flex; align-items: center; justify-content: center; }
      .footer  { grid-area: footer;  background: #023e8a; color: #fff; display: flex; align-items: center; justify-content: center; }
    </style>
  </head>
  <body>
    <div class="layout">
      <div class="header">Header</div>
      <div class="sidebar">Sidebar</div>
      <div class="main">Main content</div>
      <div class="footer">Footer</div>
    </div>
  </body>
</html>

Il valore dopo ciascuna stringa di riga tra virgolette (60px, 1fr, 40px) è l'altezza della riga. Il / alla fine avvia l'elenco delle larghezze delle colonne (160px 1fr 1fr).

Quando usare `grid` vs. `grid-template`

Obiettivo	Usa
Impostare solo dimensioni esplicite di righe/colonne e aree con nome	`grid-template`
Controllare anche la direzione di auto-placement o le dimensioni delle tracce implicite	`grid`
Impostare solo le larghezze delle colonne	`grid-template-columns`
Impostare solo le altezze delle righe	`grid-template-rows`

Ricorrere alla shorthand più ristretta rende il codice più facile da leggere ed evita di reimpostare accidentalmente sotto-proprietà non correlate.

Supporto browser

La shorthand grid è supportata da tutti i browser moderni (Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+). Per ambienti più datati potrebbe essere necessario impostare le sotto-proprietà individualmente. Verifica i dati di supporto aggiornati su Can I use: CSS Grid Layout.

Vedi anche

grid-template — shorthand solo per le sotto-proprietà template
grid-template-columns e grid-template-rows — dimensionamento esplicito delle tracce
grid-template-areas — denominazione delle regioni del layout
grid-auto-flow — controlla come gli elementi posizionati automaticamente riempiono la griglia
grid-auto-rows e grid-auto-columns — dimensionamento delle tracce implicite
grid-gap — spaziatura tra righe e colonne
grid-area — posiziona un elemento tramite area con nome o numeri di linea
display — il valore grid che trasforma un elemento in un grid container
align-items e justify-content — allineamento all'interno della griglia

Pratica

Quali delle seguenti affermazioni sulla proprietà shorthand CSS grid sono corrette?

È una shorthand che reimposta tutte e sei le sotto-proprietà grid contemporaneamente, incluse sia le proprietà template che quelle di auto-placement.Le sotto-proprietà omesse da una dichiarazione grid vengono reimpostate ai loro valori iniziali.L'unità fr divide lo spazio disponibile in quote frazionali uguali tra colonne o righe.La shorthand grid può impostare sia le tracce template esplicite che le proprietà auto-flow contemporaneamente in una singola dichiarazione.grid: auto / 1fr 1fr crea due colonne di larghezza uguale con una riga dimensionata automaticamente.

Tracce esplicite vs. implicite

L'unità fr

Sintassi

Forme di valore

Esempi

Esempio 1: Griglia esplicita di base

Esempio 2: Auto-flow nelle colonne

Esempio 3: Posizionamento esplicito degli elementi con grid-area

Esempio 4: Unità fr per colonne flessibili

Esempio 5: Aree template con nome

Quando usare grid vs. grid-template

Supporto browser

Vedi anche

Pratica

L'unità `fr`

Esempio 3: Posizionamento esplicito degli elementi con `grid-area`

Esempio 4: Unità `fr` per colonne flessibili

Quando usare `grid` vs. `grid-template`