The minmax function in CSS grids

It is very convenient to specify the function minmax together with auto-fill, which sets the range of column widths from the minimum to the maximum value. If the container width does not fit all the columns, then some of them will move to a new row, while the columns in the row will be evenly distributed in it.

Let's look at an example. To see different column placement options, change the page width:

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

Write an example demonstrating the operation of the function minmax.