Urekebishaji wa Kipengele Mmojawapo kwenye Mhimili wa Ulaya wa Gridi ya CSS

Urekebishaji kwenye mhimili wa ulaya unaweza kuwekwa sio tu kwenye kipengele kizazi, lakini pia kwa kila kizazi peke yake. Kwa lengo hili hutumika sifa justify-self.

Kwenye mwanzo wa mhimili wa ulaya

Wacha tuweke urekebishaji wa kipengele chetu cha kwanza kwenye mwanzo wa mhimili wa ulaya:

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 {
  justify-self: start;
}

Результат:

Katikati ya mhimili wa ulaya

Wacha tuweke urekebishaji wa kipengele cha kwanza katikati ya mhimili wa ulaya:

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 {
  justify-self: center;
}

Результат:

Kwenye mwisho wa mhimili wa ulaya

Wacha tuweke urekebishaji wa kipengele cha kwanza kwenye mwisho wa mhimili wa ulaya:

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 {
  justify-self: end;
}

Результат:

Kazi za Vitendo

Задание 1

Unda gridi, inayojumuisha vipengele vitano, vinavyopangwa kwenye safu mbili. Tekeleza urekebishaji wa kipengele cha pili kwenye mwanzo wa mhimili wa ulaya.

Задание 2

Sasa pangilia vipengele vya gridi kwenye safu tatu na weka urekebishaji wa kipengele cha tatu katikati ya mhimili wa ulaya wa gridi.

Задание 3

Badilisha kazi iliyopita, ili urekebishaji wa kipengele cha tano ufanyike kwenye mwisho wa mhimili wa ulaya.