CSS ග්රිඩ් එකක තනි අංගයක් දෙඅක්ෂයෙන්ම යෙදීම
justify-self සහ align-self
ගුණාංග ඒකාබද්ධ කිරීමෙන් තනි අංගයක්
තිරස් සහ සිරස් අක්ෂ දෙකෙන්ම
එකවර යෙදිය හැක.
තිරස් ආරම්භයට සහ සිරස් මධ්යයට
අපගේ පළමු අංගය තිරස් අක්ෂයේ ආරම්භයට සහ සිරස් අක්ෂයේ මධ්යයට යෙදීම සකසමු:
<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 {
justify-self: start;
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 {
justify-self: center;
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 {
justify-self: end;
align-self: center;
}
:
ප්රායෝගික කාර්යයන්
අංග හයකින් සමන්විත ග්රිඩ් එකක් සාදා ඒවා පේළි දෙකකට සකසන්න. දෙවන අංගය තිරස් අක්ෂයේ ආරම්භයට සහ සිරස් අක්ෂයේ මධ්යයට යෙදීම සිදු කරන්න.
දැන් ග්රිඩ් අංග පේළි තුනකට සකසා තුන්වන අංගය තිරස් අක්ෂයේ මධ්යයට සහ සිරස් අක්ෂයේ අවසානයට යෙදීම සකසන්න.
කලින් කාර්යය වෙනස් කරන්න, හතරවන අංගය තිරස් අක්ෂයේ අවසානයට සහ සිරස් අක්ෂයේ මධ්යයට යෙදෙන ආකාරයට.
දැන් එය කරන්න පස්වන අංගය තිරස් අක්ෂයේ ආරම්භයට සහ සිරස් අක්ෂයේ ආරම්භයට යෙදෙන අතර, හයවන අංගය - තිරස් අක්ෂයේ අවසානයට සහ සිරස් අක්ෂයේ මධ්යයට යෙදෙන ආකාරයට.
