Hàm minmax trong CSS Grid

Rất thuận tiện khi cùng với auto-fill chỉ định hàm minmax, hàm này đặt phạm vi chiều rộng cột từ giá trị tối thiểu đến giá trị tối đa. Nếu chiều rộng của container không chứa được tất cả các cột, thì một số trong số chúng sẽ di chuyển xuống một dòng mới, trong khi các cột trên dòng sẽ được phân bổ đều trong đó.

Hãy xem ví dụ. Để thấy được các biến thể khác nhau về vị trí của các cột, hãy thay đổi chiều rộng của trang:

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

Viết một ví dụ minh họa cách hoạt động của hàm minmax.