Функсияи minmax дар Grid-ҳои CSS

Аз ҳамроҳи истифодаи 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-ро намоиш диҳад.