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