Kifupi cha Kulinganisha Ndani ya Seli kwenye Mihili Yote kwenye Gridi ya CSS
Kwa kutumia sifa ya kifupi place-items
inayoweza kulinganisha vipengele
ndani ya seli za gridi wakati huo huo kwenye mihili yote.
Sifa hii inakubali maadili mawili,
yaliyotenganishwa na nafasi.
Kwa thamani ya kwanza tunaweka mpangilio
wa kipengele kwenye mhimili wima, na ya pili - kwenye mhimili mlalo.
Sifa huwekwa kwenye kipengele kizazi.
Wacha tuangalie utendaji wa hii sifa kwa kutumia mifano.
Katikati ya Wima na Mwanzo ya Mlalo
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
place-items: center start;
grid-template-columns: 100px 100px;
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;
}
:
Tuangalie gridi yetu kwenye kisakinishi:
Mwisho ya Wima na Katikati ya Mlalo
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
place-items: end center;
grid-template-columns: 100px 100px;
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;
}
:
Tuangalie gridi yetu kwenye kisakinishi:
Mwanzo ya Wima na Mwisho ya Mlalo
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
place-items: start end;
grid-template-columns: 100px 100px;
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;
}
:
Tuangalie gridi yetu kwenye kisakinishi:
Kazi za Vitendo
Unda gridi inayojumuisha vipengele sita na uwaweke kwenye safu wima mbili. Fanya ulinganishe vipengele kwenye mwanzo wa mhimili mlalo na katikati ya mhimili wima wa gridi.
Sasa weka vipengele vya gridi kwenye safu wima tatu na uweke ulinganifu wa vipengele katikati ya mhimili mlalo na katikati ya mhimili wima wa gridi.
Badilisha kazi iliyotangulia ili ulinganifu wa vipengele ufanyike kwenye mwisho wa mhimili mlalo na mwanzo wa mhimili wima wa gridi.
