Proprietà CSS grid-auto-flow

La proprietà grid-auto-flow controlla il funzionamento dell'algoritmo di posizionamento automatico della griglia — ovvero come gli elementi che non hai posizionato esplicitamente vengono distribuiti nella griglia.

Quando posizioni gli elementi manualmente con grid-column-start, grid-row-start o grid-area, il browser li colloca esattamente dove hai indicato. Tutti gli altri elementi vengono posizionati automaticamente, e grid-auto-flow determina l'ordine e la direzione usati dal browser per riempire le celle rimanenti. Questa è la proprietà da usare quando hai un contenitore griglia con un numero variabile o sconosciuto di elementi figlio e vuoi che vengano disposti in modo prevedibile senza dimensionarli uno per uno.

Questa proprietà accetta le seguenti parole chiave: row, column, dense, row-dense e column-dense. Puoi usare una singola parola chiave (row, column o dense) oppure due parole chiave, dove una imposta la direzione e l'altra è dense (row dense / column dense). Se non specifichi una direzione, viene assunta row.

Come funziona

row (il valore predefinito) riempie la griglia una riga alla volta, da sinistra a destra, aggiungendo nuove righe secondo necessità.
column riempie una colonna alla volta, dall'alto verso il basso, aggiungendo nuove colonne secondo necessità.
dense attiva un algoritmo di impacchettamento denso. Per impostazione predefinita (impacchettamento sparso), l'algoritmo procede sempre in avanti, quindi un elemento grande può lasciare uno spazio vuoto che gli elementi successivi più piccoli saltano. Con dense, il browser torna indietro per riempire quei vuoti con qualsiasi elemento che ci stia — il che può far apparire gli elementi fuori dall'ordine del DOM. Usalo solo quando la densità visiva è più importante dell'ordine di lettura e navigazione con la tastiera, poiché può compromettere l'accessibilità.

Valore iniziale	row
Si applica a	Contenitori griglia.
Ereditato	No.
Animabile	No.
Versione	CSS Grid Layout Module Level 1
Sintassi DOM	object.style.gridAutoFlow = "row";

Sintassi

Sintassi della proprietà CSS grid-auto-flow

grid-auto-flow: row | column | dense | row-dense | column-dense | initial | inherit;

Esempio: grid-auto-flow: column

Con grid-auto-flow: column, i quattro elementi riempiono la griglia una colonna alla volta. Confrontalo con l'esempio row che segue per vedere la differenza nell'ordine di posizionamento.

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

Provalo tu stesso »

Qui gli elementi vengono posizionati riempiendo ogni colonna. Nell'esempio seguente, vediamo che gli elementi vengono posizionati riempiendo ogni riga.

Esempio: grid-auto-flow: row

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

Provalo tu stesso »

Esempio: grid-auto-flow: row (con posizionamento esplicito)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grey-container {
        height: 250px;
        width: 250px;
        display: grid;
        gap: 20px;
        grid-template: repeat(4, 1fr) / repeat(2, 1fr);
        grid-auto-flow: row;
        background-color: #ccc;
        padding: 10px;
      }
      .box1 {
        background-color: #00f3ff;
        grid-row-start: 3;
      }
      .box2 {
        background-color: #ff00d4;
      }
      .box3 {
        background-color: #827c7c;
      }
      .box4 {
        grid-column-start: 2;
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div class="grey-container">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
    </div>
  </body>
</html>

Provalo tu stesso »

Risultato

Esempio: grid-auto-flow: column (con posizionamento esplicito)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grey-container {
        height: 250px;
        width: 250px;
        display: grid;
        gap: 20px;
        grid-template: repeat(4, 1fr) / repeat(2, 1fr);
        grid-auto-flow: column;
        background-color: #ccc;
        padding: 10px;
      }
      .box1 {
        background-color: #00f3ff;
        grid-row-start: 3;
      }
      .box2 {
        background-color: #827c7c;
      }
      .box3 {
        background-color: #ff00d4;
      }
      .box4 {
        grid-column-start: 2;
        background-color: #4cbb13;
      }
    </style>
  </head>
  <body>
    <div class="grey-container">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
    </div>
  </body>
</html>

Provalo tu stesso »

Esempio: grid-auto-flow: column-dense

I due esempi successivi mostrano le varianti di impacchettamento dense. Poiché box1 è posizionato esplicitamente sulla riga 3 (grid-row-start: 3), lascia uno spazio vuoto all'inizio della griglia. La parola chiave dense consente al browser di riportare un elemento successivo in quel vuoto invece di lasciarlo libero — compatto, ma gli elementi non seguono più l'ordine della sorgente.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grey-container {
        height: 250px;
        width: 250px;
        display: grid;
        gap: 20px;
        grid-template: repeat(4, 1fr) / repeat(2, 1fr);
        grid-auto-flow: column-dense;
        background-color: #ccc;
        padding: 10px;
      }
      .box1 {
        background-color: #0ad6e0;
        grid-row-start: 3;
      }
      .box2 {
        background-color: #841c72;
      }
      .box3 {
        background-color: #827c7c;
      }
      .box4 {
        grid-column-start: 2;
        background-color: #4cbb13;
      }
    </style>
  </head>
  <body>
    <div class="grey-container">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
    </div>
  </body>
</html>

Provalo tu stesso »

Esempio: grid-auto-flow: row-dense

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grey-container {
        height: 250px;
        width: 250px;
        display: grid;
        gap: 20px;
        grid-template: repeat(4, 1fr) / repeat(2, 1fr);
        grid-auto-flow: row-dense;
        background-color: #ccc;
        padding: 10px;
      }
      .box1 {
        background-color: #0ad6e0;
        grid-row-start: 3;
      }
      .box2 {
        background-color: #841c72;
      }
      .box3 {
        background-color: #827c7c;
      }
      .box4 {
        grid-column-start: 2;
        background-color: #4cbb13;
      }
    </style>
  </head>
  <body>
    <div class="grey-container">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
    </div>
  </body>
</html>

Provalo tu stesso »

Valori

Valore	Descrizione	Provalo
row	Posiziona gli elementi riempiendo ogni riga, aggiungendo nuove righe se necessario. Questo è il valore predefinito della proprietà.	Provalo »
column	Posiziona gli elementi riempiendo ogni colonna, aggiungendo nuove colonne se necessario.	Provalo »
dense	Posiziona gli elementi per riempire i vuoti nella griglia, indipendentemente dalle dimensioni degli elementi. Può far apparire gli elementi posizionati automaticamente fuori dall'ordine del DOM.	Provalo »
row-dense	Posiziona gli elementi riempiendo ogni riga e colma i vuoti nella griglia.	Provalo »
column-dense	Posiziona gli elementi riempiendo ogni colonna e colma i vuoti nella griglia.	Provalo »
initial	Imposta la proprietà al suo valore predefinito.
inherit	Eredita la proprietà dall'elemento genitore.

Quando usarlo

Usa grid-auto-flow quando il numero di elementi nella griglia è dinamico — un elenco di card, una galleria fotografica, un tag cloud — e vuoi che il browser li posizioni per te. Passa a column quando il contenuto deve scorrere dall'alto verso il basso prima di andare a capo, e aggiungi dense solo quando riempire ogni spazio vuoto è più importante che mantenere gli elementi nell'ordine della sorgente.

La dimensione delle tracce create implicitamente è controllata separatamente da grid-auto-columns e grid-auto-rows. Per i layout espliciti, consulta grid-template e il capitolo principale su CSS Grid.

Esercitazione

Pratica

Cosa fa la proprietà CSS grid-auto-flow?

Definisce la distribuzione di righe e colonne in una grigliaImposta il colore per ogni parola in una griglia di testoControlla il posizionamento automatico degli elementi della grigliaImposta la dimensione delle linee della grigliaCrea una griglia tridimensionale