CSS ග්රිඩ් හැඳින්වීම
CSS ග්රිඩ් යනු අංග තිරස් සහ සිරස් අතට එකවර ස්ථානගත කිරීමේ ක්රමයකි. මෙය flexbox ට සාපේක්ෂව වඩාත් දියුණු ක්රමයක් වන නමුත් ප්රගුණ කිරීමට වඩාත් සංකීර්ණ ය.
ග්රිඩ් එකක් සෑදීම සඳහා, ඔබට මූලද්රව්යයකට display
ගුණාංගය grid අගයට සකස් කිරීම අවශ්ය වේ:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
}
ඊට පසුව, මූලද්රව්යය ද්විමාන ජාලයක් බවට පත්වනු ඇත, එහිදී අංග සිරස් අතට (තීරු) සහ තිරස් අතට (පේළි) සකස් වේ. තීරුවක් සහ පේළියක් ඡේදනය වන ප්රදේශය කොටුව ලෙස හැඳින්වේ.
විශේෂ ගුණාංග භාවිතයෙන් ඔබට මූලද්රව්ය පේළි සහ තීරු ඔස්සේ ස්ථානගත කළ හැකිය. මෙය උදාහරණයක් ලෙස, මේ වගේ දේවල් සැකසීමට පහසු කරවයි:
ඊළඟ පාඩම් වලදී, අපි මුලින්ම මූලද්රව්ය තීරු ඔස්සේ ස්ථානගත කිරීම අධ්යයනය කරමු, ඉන්පසු පේළි අධ්යයනයට යමු, ඉන් පසුව මේ සියල්ල එකට ඒකාබද්ධ කරමු.