CSS grid හි auto-fill අගය
grid container හි සමාන තීර වල ප්රමාණය සකස් කිරීම සඳහා
repeat ශ්රිතය තුළ
auto-fill අගය සඳහන් කිරීම ඉතා පහසුය,
එයින් අපගේ container අවශ්ය පළලකින් යුත්
සමාන තීර වලින් පිරෙනු ඇත.
අපි මූලද්රව්ය අටකින් යුත් වගුවක් සාදා
එක් එක් තීරයට සමාන පළලක් 200px වශයෙන් පවරමු.
මෙහිදී, auto-fill අගය අවශ්ය
තීර ගණන ගණනය කර ගන්නාවා:
<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, 200px);
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
තීරයේ පළල 200px ලෙස සකසන්න.
මව් අංගයේ පළල වෙනස් කර
තීර ගණන වෙනස් වන ආකාරය
නරඹන්න.
