Función minmax en CSS Grid

Es muy conveniente junto con auto-fill especificar la función minmax, que establece un rango de ancho para las columnas desde un valor mínimo hasta un valor máximo. Si el ancho del contenedor no puede acomodar todas las columnas, entonces algunas de ellas se moverán a una nueva línea, mientras que las columnas en la línea se distribuirán uniformemente en ella.

Veamos un ejemplo. Para poder ver las diferentes variantes de disposición de columnas, cambia el ancho de la página:

<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: repeat(auto-fill, minmax(150px, 1fr));
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Escribe un ejemplo que demuestre el funcionamiento de la función minmax.