CSS ග්‍රිඩ් වල 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 ක්‍රියාකාරීත්වය ප්‍රදර්ශනය කරන
උදාහරණයක් ලියන්න.
