Il valore auto nei CSS Grid

Nei grid, quando si specificano le dimensioni di righe e colonne, si può utilizzare il valore auto. In questo caso, gli elementi riempiranno semplicemente tutto lo spazio libero disponibile per loro al netto della larghezza specificata in pixel. Diamo un'occhiata ad alcuni esempi.

Specifichiamo una larghezza fissa in pixel per la prima e la terza colonna, e lasciamo che la seconda colonna occupi automaticamente lo spazio rimanente:

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

#parent {
	display: grid;
	grid-template-columns: 100px auto 150px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Posiziona gli elementi figli in due colonne: la prima di larghezza 200px, e la seconda che occupi lo spazio rimanente.

Posiziona gli elementi figli in tre colonne: la prima di larghezza 100px, la seconda 150px, e la terza che occupi lo spazio rimanente.