Η συνάρτηση minmax στα CSS Grid

Είναι πολύ βολικό να καθορίζουμε μαζί με το auto-fill τη συνάρτηση minmax, που ορίζει το εύρος πλάτους των στηλών από την ελάχιστη έως τη μέγιστη τιμή. Εάν το πλάτος του περιέκτη δεν χωράει όλες τις στήλες, τότε μερικές από αυτές θα μετακινηθούν σε νέα γραμμή, ενώ οι στήλες στη γραμμή θα κατανεμηθούν ομοιόμορφα σε αυτήν.

Ας δούμε ένα παράδειγμα. Για να δείτε τις διαφορετικές επιλογές τοποθέτησης στηλών αλλάξτε το πλάτος της σελίδας:

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

Γράψτε ένα παράδειγμα που να δείχνει τη λειτουργία της συνάρτησης minmax.