minmax ფუნქცია 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 ფუნქციის მუშაობას.