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>9</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
ඔබේ ග්රිඩ් එකේ තීරු තුනක් ඇති යැයි සිතමු.
තෙවන තීරුව පළමු
සහ දෙවන තීරුවට වඩා 1.5 ගුණයක් විශාල වන පරිදි සකසන්න.
ඔබේ ග්රිඩ් එකේ තීරු තුනක් ඇති යැයි සිතමු.
දෙවන තීරුව පළමු තීරුවට වඩා 1.5 ගුණයක් විශාල වන පරිදිද,
තෙවන තීරුව පළමු තීරුවට වඩා 2.5
ගුණයක් විශාල වන පරිදිද සකසන්න.
