CSS ග්රිඩ් සෛල තුළ තිරස් අක්ෂය දිගේ සමාවතීකරණය
ග්රිඩ් සෛල තුළ ඇති මූලද්රව්ය සමාවතීකරණය කිරීම සඳහා,
එනම් තීරු සහ පේළි ඡේදනය වීමෙන් ඇතිවන ප්රදේශ,
භාවිතා කරන්නේ justify-items ගුණයයි, එය
සකස් කරනු ලබන්නේ ප්රමුඛ මූලද්රව්යයේ ය.
සමාවතීකරණය වැඩියෙන්ම පැහැදිලිව දැකගත හැක්කේ
ග්රිඩ් බ්රවුසර් දෝෂ නිරාකරණ උපකරණයේ දී බැලීමෙන් ය.
අක්ෂයේ ආරම්භයට
අපගේ මූලද්රව්ය සෛල තුළ තිරස් අක්ෂයේ ආරම්භයට සමාවතීකරණය කරමු:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
justify-items: start;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
height: 200px;
width: 400px;
border: 2px solid #696989;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
දැන් අපගේ ග්රිඩ් දෝෂ නිරාකරණ උපකරණයේ දෙස බලමු:
අක්ෂයේ කේන්ද්රයට
අපගේ මූලද්රව්ය සෛල තුළ තිරස් අක්ෂයේ කේන්ද්රයට සමාවතීකරණය කරමු:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
justify-items: center;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
දැන් අපගේ ග්රිඩ් දෝෂ නිරාකරණ උපකරණයේ දෙස බලමු:
අක්ෂයේ අවසානයට
අපගේ මූලද්රව්ය තිරස් අක්ෂයේ අවසානයට සමාවතීකරණය කරමු:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
justify-items: end;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
දැන් අපගේ ග්රිඩ් දෝෂ නිරාකරණ උපකරණයේ දෙස බලමු:
ප්රායෝගික කාර්යයන්
ග්රිඩ් එකක් සාදන්න, එය මූලද්රව්ය පහකින් සමන්විත වන අතර ඒවා පේළි තුනකින් සකස් කර ඇත. මූලද්රව්ය තිරස් අක්ෂය දිගේ සමාවතීකරණය කරන්න.
දැන් ග්රිඩ් මූලද්රව්ය පේළි දෙකකින් සකස් කර ඒවායේ සෛල තුළ මූලද්රව්ය තිරස් අක්ෂයේ කේන්ද්රයට සමාවතීකරණය කරන්න.
පෙර කාර්යය වෙනස් කරන්න, එමගින් මූලද්රව්ය සමාවතීකරණය සිදුවන්නේ තිරස් අක්ෂයේ අවසානයට ය.
