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