CSS ග්රිඩ්වල තීරු ප්රමාණය සහ පළල
ග්රිඩ් එකක් සමඟ වැඩ කිරීම හඳුන්වා දීම
අපි ආරම්භ කරන්නේ තීරු ප්රමාණය සහ පළල පවරා ගැනීමෙනි,
ඒවා ඔස්සේ ළමා අංග ස්ථානගත වේ.
මෙම අරමුණ සඳහා අපි භාවිතා කරන්නේ
grid-template-columns ගුණයයි, එය නියම කරනු ලබන්නේ
මව් අංගයේ සහ එය නිර්වචනය කරන්නේ
ග්රිඩ් එකක පිහිටන ළමා අංග වලට ඇති
තීරු ප්රමාණය සහ පළලය.
ගුණයේ අගය තුළ අපි තීරු පළල
පික්සල වලින් නියම කරමු.
උදාහරණය
පළමුව අපි මව් අංගයක් සාදා
එය ග්රිඩ්-කන්ටේනරයක් බවට පත් කරමු.
අප සතුව div එකක් ඇතැයි සිතමු, එහි ස්ථානගත වී ඇත්තේ
ළමා අංග හතරකි. ඒ සඳහා අපි
display ගුණයේ අගය grid ලෙසත්,
grid-template-columns ගුණයේ
තීරු දෙකක් සඳහා පළලත් ලියන්නෙමු:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 200px 400px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
උදාහරණය
දැන් අපි වගුවක් සාදමු විවිධ ප්රමාණයේ තීරු හතරක් සහිතව:
<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: 50px 100px 200px 250px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
ප්රායෝගික කාර්යයන්
ඔබට ළමා අංග නවයක් සහිත div එකක් ඇතැයි සිතමු. මව් අංගය ග්රිඩ්-කන්ටේනරයක් බවට පත් කරන්න.
ළමා අංග තීරු දෙකකට ස්ථානගත කරන්න,
ඒවායේ පළල 200px වේ.
ළමා අංග තීරු තුනකට ස්ථානගත කරන්න,
ඒවායේ පළල 150px වේ.
ළමා අංග තීරු තුනකට ස්ථානගත කරන්න:
පළමු තීරුවේ පළල 100px,
දෙවන එක 150px, සහ තෙවන එක
200px වේ.
