CSS Grid-də minmax funksiyası
auto-fill ilə birlikdə
minmax funksiyasını göstərmək çox rahatdır,
bu funksiya sütunların eninin minimum dəyərdən
maksimum dəyərə qədər olan diapazonunu təyin edir.
Konteynerin eni bütün sütunları yerləşdirmirsə,
onların bəziləri yeni sətirə keçəcək, eyni zamanda sətirdəki sütunlar
orada bərabər paylanacaq.
Nümunəyə baxaq. Sütunların müxtəlif yerləşdirmə variantlarını görmək üçün səhifənin enini dəyişdirin:
<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 funksiyasının işini nümayiş etdirən
nümunə yazın.
