CSS ග්රිඩ් එකක තනි අංගයක තිරස් අක්ෂය ඔස්සේ සැලැස්ම
තිරස් අක්ෂය ඔස්සේ සැලැස්ම
පැවසිය හැක්කේ දෙමාපිය අංගයට පමණක් නොව,
එක් එක් උපඅංගය සඳහා වෙන වෙනම.
මෙම අරමුණ සඳහා භාවිතා කරන්නේ
justify-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;
}
:
තිරස් අක්ෂයේ මධ්යයට
පළමු අංගය තිරස් අක්ෂයේ මධ්යයට සැලැස්ම සකසමු:
<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;
}
:
තිරස් අක්ෂයේ අවසානයට
පළමු අංගය සඳහා තිරස් අක්ෂයේ අවසානයට සැලැස්ම සකසමු:
<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;
}
:
ප්රායෝගික කාර්යයන්
ග්රිඩ් එකක් සාදන්න, එය පන්ත අංග පේළි දෙකක් ඔස්සේ ස්ථානගත කර ඇත. දෙවන අංගය තිරස් අක්ෂයේ ආරම්භයට සැලැස්ම සිදු කරන්න.
දැන් ග්රිඩ් අංග පේළි තුනක් ඔස්සේ ස්ථානගත කර තෙවන අංගය ග්රිඩ් එකේ තිරස් අක්ෂයේ මධ්යයට සැලැස්ම සකසන්න.
කලින් කාර්යය වෙනස් කරන්න, පස්වන අංගය තිරස් අක්ෂයේ අවසානයට සැලැස්ම වන පරිදි.
