Kifupi cha Kuweka Mstari wa Kipengele Kimoja katika Gridi ya CSS
Inawezekana kuweka mstari wa kipengele kimoja
wakati huo huo kwenye mhimili mlalo na wima.
Kwa hili hutumika sifa place-self.
Inakubali maadili mawili yaliyotenganishwa na nafasi.
Thamani ya kwanza inaonyesha uwekaji mstari
kwenye mhimili wima, na ya pili - kwenye mhimili mlalo.
Tuangalie kwa mifano.
Katikati ya wima na mwanzo wa mlalo
<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;
}
:
Mwanzo wa wima na mwisho wa mlalo
<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;
}
:
Mwisho wa wima na katikati ya mlalo
<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;
}
:
Kazi za Vitendo
Unda gridi, inayojumuisha vipengele vitano na uwaweke kwenye safu tatu. Fanya uwekaji mstari wa kipengele cha kwanza kwenye mwanzo wa mhimili mlalo na katikati ya mhimili wima.
Badilisha kazi iliyotangulia ili uwekaji mstari wa kipengele cha tatu ufanyike kwenye mwisho wa mhimili mlalo na katikati ya mhimili wima.
Sasa weka vipengele vya gridi kwenye safu mbili na uweke uwekaji mstari wa kipengele cha tano katikati ya mhimili mlalo na mwisho wa mhimili wima.
Fanya ili kipengele cha pili kiwekwe mstari kwenye mwanzo wa mhimili mlalo na mwisho wa mhimili wima, na kipengele cha nne - katikati ya mhimili mlalo na mwanzo wa mhimili wima.
