Significado de auto en CSS Grid

En Grid, al especificar los tamaños de filas y columnas, se puede utilizar el valor auto. En este caso, los bloques simplemente llenarán todo el espacio libre disponible para ellos, menos el ancho especificado en píxeles. Veamos algunos ejemplos.

Asignemos al primer y tercer columnas un ancho fijo en píxeles, y que la segunda columna ocupe automáticamente el espacio restante:

<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;
}

Coloque los elementos hijos en dos columnas: la primera de un ancho de 200px, y que la segunda ocupe el espacio restante.

Coloque los elementos hijos en tres columnas: la primera de un ancho de 100px, la segunda de 150px, y que la tercera ocupe el espacio restante.