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
html<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>css#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
html<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>css#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
html<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>css#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.