CSS grid gözleri içinde iki ok boýunça deňleşdirme

Grid gözleri içindäki elementleri şol bir wagtyň özünde gorizontal we dik oklar boýunça deňleşdirip bolýar. Bu maksat üçin biz ata elementde berilýän justify-items we align-items aýratynlyklaryny birleşdirip bilýäris.

Oklaryň merkezi boýunça

Geliň, elementlerimizi gorizontal we dik oklaryň merkezine deňleşdireliň:

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;
}

Результат:

Indi gridimizi düzediji gurjunda göreliň:

Gorizontalyň başy we dikligiň ahyry boýunça

Geliň, elementlerimizi gözler içinde gorizontal ok boýunça başynda we dik ok boýunça ahyrynda ýerleşdireliň:

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;
}

Результат:

Indi gridimizi düzediji gurjunda göreliň:

Gorizontalyň ahyry we dikligiň başy boýunça

Geliň, elementlerimizi gözler içinde gorizontal ok boýunça ahyrynda we dik ok boýunça başynda ýerleşdireliň:

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;
}

Результат:

Indi gridimizi düzediji gurjunda göreliň:

Amaly meseleler