CSS гриддеринин minmax функциясы

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 функциясынын иштешин көрсөткөн мисалды жазыңыз.