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