CSS Gridda minmax funktsiyasi

auto-fill bilan birga minmax funktsiyasini ko‘rsatish juda qulay, bu ustunlarning kengligi uchun minimaldan maksimal qiymatgacha bo‘lgan diapazonni belgilaydi. Agar konteyner kengligi barcha ustunlarni sig‘dira olmasa, ularning ba’zilari yangi qatorga ko‘chadi, shu bilan birga qatordagi ustunlar unga teng taqsimlanadi.

Keling, misol bilan ko‘rib chiqaylik. Turli xil ustun joylashuv variantlarini ko‘rish uchun sahifa kengligini o‘zgartiring:

<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 funktsiyasining ishlashini namoyish etuvchi misol yozing.