Proprietà grid-auto-columns CSS

Definizione e uso

L'attributo grid-auto-columns imposta la dimensione delle colonne nel contenitore della griglia.

Questa proprietà influisce solo sulle colonne che non hanno dimensioni impostate.

Vedi anche:

Tutorial CSS:Layout a griglia CSS

Manuale CSS:Proprietà grid-auto-rows

Esempio

Imposta la dimensione predefinita delle colonne nella griglia:

.grid-container {
  display: grid;
  grid-auto-columns: 50px;
}

Prova personalmente

Sintassi CSS

grid-auto-columns: auto|max-content|min-content|length;

Valore dell'attributo

Valore Descrizione
auto Valore predefinito. La dimensione della colonna è determinata dalla dimensione del contenitore.
fit-content()
max-content Imposta la dimensione di ogni colonna in base al progetto più grande nella colonna.
min-content Imposta la dimensione di ogni colonna in base al progetto più piccolo nella colonna.
minmax(min.max) Imposta un intervallo di dimensioni tra min e max, inclusi.
length Imposta la dimensione delle colonne utilizzando valori di lunghezza validi. VediUnità di lunghezza.
% Imposta la dimensione delle colonne utilizzando valori percentuali.

Dettagli tecnici

Valore predefinito: auto
Ereditarietà: No
Creazione di animazioni: Supportato. Vedi:Proprietà correlate agli animazioni.
Versione: Modulo di Layout a Griglia CSS Livello 1
Sintassi JavaScript: object.style.gridAutoColumns="120px"

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente questa proprietà.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44