Usawazishaji wa Yaliyomo kwenye Axes Zote mbili kwenye Gridi ya CSS

Mara nyingi kwenye gridi, huenda ikahitajika kusawazisha yaliyomo wakati huo huo kwenye mhimili mlalo na mhimili wima wa gridi. Kwa lengo hili, tunaweza kutumia pamoja sifa mbili, zilizochambuliwa nawe katika somo lililopita: justify-content na align-content.

Kwenye Mwanzo wa Wima na Mwisho wa Mlalo

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

css#parent {
  display: grid;
  justify-content: flex-end;
  align-content: flex-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;
}

Результат:

Kwenye Mwisho wa Wima na Mwanzo wa Mlalo

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

css#parent {
  display: grid;
  justify-content: flex-start;
  align-content: flex-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;
}

Результат:

Katikati ya Mhimili Wima na Mlalo

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

css#parent {
  display: grid;
  justify-content: flex-end;
  align-content: 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;
}

Результат:

Kazi za Vitendo

Задание 1

Unda gridi, inayojumuisha vipengele sita na uwaweke kwenye nguzo mbili. Fanya usawazishaji wa vipengele kwenye mwanzo wa mhimili mlalo na katikati ya mhimili wima wa gridi.

Задание 2

Sasa weka vipengele vya gridi kwenye nguzo tatu na weka usawazishaji wa vipengele katika katikati ya mhimili mlalo na mwisho wa mhimili wima wa gridi.

Задание 3

Badilisha kazi iliyopita, ili usawazishaji wa vipengele ufanyike kwenye mwisho wa mhimili mlalo na katikati ya mhimili wima wa gridi.