CSS ග්රිඩ් එකක තනි මූලද්රව්යයක සිරස් අක්ෂයට සමපාත කිරීම
ඒ හා සමානව, ඔබට මූලද්රව්ය
සිරස් අක්ෂයට සමපාත කළ හැකිය
align-self ගුණාංගය භාවිතා කර.
අපි උදාහරණ මගින් බලමු,
එය ක්රියා කරන ආකාරය.
සිරස් අක්ෂයේ ආරම්භයට
පළමු මූලද්රව්යය සිරස් අක්ෂයේ ආරම්භයට සමපාත කිරීම සකසමු:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
display: grid;
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;
}
#elem1 {
align-self: start;
}
:
සිරස් අක්ෂයේ මධ්යයට
පළමු මූලද්රව්යය සිරස් අක්ෂයේ මධ්යයට සමපාත කිරීම සකසමු:
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
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;
}
#elem1 {
align-self: center;
}
:
සිරස් අක්ෂයේ අවසානයට
අපගේ ග්රිඩ් එකේ පළමු මූලද්රව්යය සිරස් අක්ෂයේ අවසානයට සමපාත කිරීම සකසමු:
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
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;
}
#elem1 {
align-self: end;
}
:
ප්රායෝගික කාර්යයන්
තීරු දෙකකින් සකස් වූ මූලද්රව්ය පහකින් යුත් ග්රිඩ් එකක් සාදන්න. තෙවන මූලද්රව්යය ග්රිඩ් එකේ සිරස් අක්ෂයේ ආරම්භයට සමපාත කිරීම සිදු කරන්න.
දැන් ග්රිඩ් මූලද්රව්ය තීරු තුනකින් සකස් කර දෙවන මූලද්රව්යය ග්රිඩ් එකේ සිරස් අක්ෂයේ මධ්යයට සමපාත කිරීම සකසන්න.
පෙර කාර්යය වෙනස් කරන්න, හතරවන සහ පස්වන මූලද්රව්ය සමපාත කිරීම සිරස් අක්ෂයේ අවසානයට සහ ආරම්භයට පිළිවෙලින් සිදු වන පරිදි.
