Proprietà CSS grid-template-columns

Definizione e uso

L'attributo grid-template-columns determina il numero di colonne (e la larghezza) della布局 di griglia.

Questi valori sono una lista separata da spazi, dove ogni valore specifica la dimensione della colonna corrispondente.

Crea un contenitore di griglia a quattro colonne:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

Crea un layout di griglia a quattro colonne e definisci la dimensione di ogni colonna:

.grid-container {
  display: grid;
  grid-template-columns: 30px 200px auto 100px;
}

grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;

Valore	Descrizione
none	Valore predefinito. Crea colonne quando necessario.
auto	La dimensione della colonna dipende dalla dimensione del contenitore e dalla dimensione del contenuto degli oggetti nella colonna.
max-content	Imposta la dimensione di ogni colonna in base al contenuto massimo del riquadro della colonna.
min-content	Imposta la dimensione di ogni colonna in base al contenuto minimo del riquadro della colonna.
length	Imposta la dimensione delle colonne utilizzando valori di lunghezza validi. VediUnità di lunghezza.
initial	Imposta questo attributo al suo valore predefinito. Vedi initial.
inherit	Incorpora questo attributo come ereditato dal suo elemento padre. Vedi inherit.

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

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

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