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