Proprietà grid-auto-columns

La proprietà grid-auto-columns definisce il numero e la larghezza delle colonne che un elemento occuperà nella griglia implicita. Griglia implicita - una griglia che viene creata automaticamente quando gli elementi escono dai confini della griglia già definita. Nel valore della proprietà specifichiamo la larghezza delle colonne in qualsiasi unità di misura. La proprietà viene specificata nell'elemento genitore e determina la larghezza delle colonne degli elementi figli.

Sintassi

selettore {
	grid-auto-columns: larghezza colonna;
}

Esempio

Definiamo la larghezza delle colonne per i nostri elementi nella griglia implicita:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	grid-template-rows: 40px 40px;
	grid-auto-columns: 200px;
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Vedi anche

la proprietà grid-auto-rows,
che definisce il numero e l'altezza delle righe nella griglia implicita
la proprietà grid-template-columns,
che definisce il numero e la larghezza delle colonne nella griglia