Proprietà CSS grid-auto-columns

La proprietà grid-auto-columns imposta la dimensione delle colonne della griglia create implicitamente — ovvero le colonne generate automaticamente dal browser quando gli elementi della griglia vengono posizionati al di fuori delle colonne definite esplicitamente con grid-template-columns.

Perché è importante: quando costruisci una griglia, di solito dichiari un numero fisso di tracce. Ma se un elemento finisce in una colonna che non esiste ancora (ad esempio, posizioni un elemento in grid-column: 5 in una griglia a 3 colonne), CSS Grid crea quella colonna aggiuntiva al volo. Per impostazione predefinita, queste colonne generate automaticamente hanno dimensione auto, il che spesso le fa collassare per adattarsi al contenuto. grid-auto-columns ti permette di controllare la loro larghezza.

Nota: Questa proprietà influisce solo sulle colonne create implicitamente, non su quelle definite esplicitamente. Per dimensionare le colonne dichiarate in anticipo, usa invece grid-template-columns. L'equivalente per le righe è grid-auto-rows.

Quando vengono create le colonne implicite?

Le colonne implicite compaiono in due situazioni comuni:

Un elemento viene posizionato oltre l'ultima linea di colonna esplicita (es. grid-column-start: 4 quando sono definite solo 3 colonne).
La griglia usa grid-auto-flow: column, quindi i nuovi elementi scorrono nelle colonne appena create invece delle righe.

In entrambi i casi, le nuove colonne ereditano la loro larghezza da grid-auto-columns.

Valore iniziale	auto
Si applica a	Contenitori grid.
Ereditato	No.
Animabile	Sì. La dimensione delle colonne è animabile.
Versione	CSS Grid Layout Module Level 1
Sintassi DOM	object.style.gridAutoColumns = "100px";

Sintassi

Sintassi della proprietà CSS grid-auto-columns

grid-auto-columns: auto | max-content | min-content | length | % | minmax(min, max);

Esempio di grid-auto-columns:

Esempio della proprietà CSS grid-auto-columns con valori auto e lunghezza

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-auto-columns: 50px;
        gap: 10px;
        background-color: #555;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .black-container {
        display: grid;
        grid-auto-columns: 100px;
        gap: 10px;
        background-color: #000;
        padding: 10px;
      }
      .black-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .auto-container {
        display: grid;
        grid-auto-columns: auto;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .auto-container > div {
        background-color: #999;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-columns property example</h2>
    <h3>50 pixels</h3>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>100 pixels</h3>
    <div class="black-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>auto</h3>
    <div class="auto-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

Nell'esempio seguente, la proprietà grid-auto-columns viene usata per impostare una dimensione predefinita (larghezza) per tutte le colonne.

Esempio di grid-auto-columns con tutti i valori:

Esempio della proprietà CSS grid-auto-columns con valori max-content, min-content, auto e lunghezza

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-auto-columns: 50px;
        gap: 10px;
        background-color: #555;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .black-container {
        display: grid;
        grid-auto-columns: 100px;
        gap: 10px;
        background-color: #000;
        padding: 10px;
      }
      .black-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .grey-container {
        display: grid;
        grid-auto-columns: max-content;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grey-container > div {
        background-color: #555;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .white-container {
        display: grid;
        grid-auto-columns: min-content;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .white-container > div {
        background-color: #fff;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .auto-container {
        display: grid;
        grid-auto-columns: auto;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .auto-container > div {
        background-color: #999;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .minmax-container {
        display: grid;
        grid-auto-columns: minmax(50px, 1fr);
        gap: 10px;
        background-color: #eee;
        padding: 10px;
      }
      .minmax-container > div {
        background-color: #777;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-columns property example</h2>
    <p>Use the grid-auto-columns property to set a default size (width) for all columns.</p>
    <h3>50 pixels</h3>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>100 pixels</h3>
    <div class="black-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>max-content</h3>
    <div class="grey-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>min-content</h3>
    <div class="white-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>auto</h3>
    <div class="auto-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>minmax(50px, 1fr)</h3>
    <div class="minmax-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 »

Valori

Valore	Descrizione
auto	La dimensione delle colonne è determinata dal contenuto o dallo spazio disponibile. Questo è il valore predefinito della proprietà.
max-content	La dimensione di ogni colonna è determinata dal contributo max-content più grande dei suoi elementi.
min-content	La dimensione di ogni colonna è determinata dal contributo min-content più piccolo dei suoi elementi.
minmax(min, max)	L'intervallo di dimensione è maggiore o uguale a "min" e minore o uguale a "max".
length	La dimensione delle colonne è specificata da un valore di lunghezza.
%	La dimensione delle colonne è specificata in percentuale.

Puoi anche passare un elenco di dimensioni separate da spazio (ad esempio grid-auto-columns: 100px 200px). L'elenco si ripete in ordine per ogni nuova colonna implicita.

Proprietà correlate

grid-auto-rows — la stessa logica per le righe create implicitamente.
grid-auto-flow — controlla se gli elementi posizionati automaticamente creano nuove righe o colonne.
grid-template-columns — definisce le colonne esplicite.
grid — la proprietà abbreviata che raccoglie le proprietà del layout grid.

Esercizio

Pratica

Cosa fa la proprietà 'grid-auto-columns' in CSS?

Viene usata per specificare la dimensione delle colonne della griglia create implicitamente.Viene usata per cambiare il colore delle colonne della grigliaControlla l'altezza delle righe della grigliaFunziona insieme a 'grid-template-areas' e 'grid-auto-flow' per fare riferimento alle colonne della griglia.