CSS ග්රිඩ් වල ප්රතිශත සහ fr ඒකක
fr සමඟ අනුකූලව,
% හි අගයන් ද භාවිතා කළ හැකිය,
ඒවා ද කන්ටේනරයේ කොටසක් ලෙස තීරුවක්
කුමන ප්රමාණයක් ගනීද යන්න අර්ථ දක්වයි.
මෙහිදී, පළමුව % හි තීරුවේ ප්රමාණය
ගණනය කරනු ලැබේ, ඉතිරි නිදහස්
ඉඩ භාගවලට බෙදනු ලැබේ:
<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: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
ඔබේ ග්රිඩ් එකේ තීරු තුනක් ඇතැයි සිතමු.
පළමු තීරුව 20% ක් ගන්නා ආකාරයට සහ ඉතිරි
තීරු දෙක සමාන ප්රමාණයේ
වන පරිදි සකසන්න.
ඔබේ ග්රිඩ් එකේ තීරු පහක් ඇතැයි සිතමු.
පළමු තීරුව 100px ක් ගන්නා ආකාරයට,
දෙවන තීරුව 20% ක් ගන්නා ආකාරයට,
සහ ඉතිරි තීරු ඉතිරි
ඉඩ බෙදා ගන්නා ආකාරයට සකසන්න, එවිට සෑම තීරුවක්ම
පෙර තීරුවට වඩා දෙගුණයක් විශාල වේ.
