Uratibu wa Vipengele kwenye Axsi Zote Ndani ya Seli za Gridi ya CSS

Inawezekana kuweka uratibu wa vipengele ndani ya seli za gridi kwenye axsi mlalo na wima wakati huo huo. Kwa lengo hili tunaweza kuchanganya sifa mbili justify-items na align-items, ambazo hutaarifiwa kwenye kipengele-kizazi.

Katikati ya Axsi

Wacha tuwaratishe vipengele vyetu katikati ya axsi mlalo na wima:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  justify-items: center;
  align-items: center;
  grid-template-columns: 100px 100px;
  grid-template-rows: 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;
}

Результат:

Sasa tuangalie gridi yetu kwenye kipimo-chakata:

Mwanzo wa Axsi Mlalo na Mwisho wa Axsi Wima

Wacha tuweke vipengele vyetu kwenye seli kwa mwanzo wa axsi mlalo na mwisho wa axsi wima:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  justify-items: start;
  align-items: end;
  grid-template-columns: 100px 100px;
  grid-template-rows: 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;
}

Результат:

Sasa tuangalie gridi yetu kwenye kipimo-chakata:

Mwisho wa Axsi Mlalo na Mwanzo wa Axsi Wima

Wacha tuweke vipengele vyetu kwenye seli kwa mwisho wa axsi mlalo na mwanzo wa axsi wima:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  justify-items: end;
  align-items: start;
  grid-template-columns: 100px 100px;
  grid-template-rows: 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;
}

Результат:

Sasa tuangalie gridi yetu kwenye kipimo-chakata:

Kazi za Vitendo