Função minmax em Grids CSS

É muito conveniente especificar a função minmax juntamente com auto-fill, que define uma faixa de largura para as colunas de um valor mínimo até um valor máximo. Se a largura do contêiner não couber todas as colunas, então algumas delas se moverão para uma nova linha, enquanto as colunas na linha serão distribuídas uniformemente nela.

Vamos ver um exemplo. Para ver as diferentes variações de posicionamento das colunas, altere a largura da 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;
}

Escreva um exemplo demonstrando o funcionamento da função minmax.