CSS Gridda kataklar ichidagi elementlarni ikkala o‘q bo‘yicha tekislash qisqartmasi

place-items xususiyati qisqartmasi yordamida grid kataklari ichidagi elementlarni ikkala o‘q bo‘yicha bir vaqtda tekizlash mumkin. Xususiyat bo‘shliq bilan ajratilgan ikkita qiymatni qabul qiladi. Birinchi qiymat bilan elementning vertikal, ikkinchisi bilan gorizontal o‘q bo‘yicha joylashishini belgilaymiz. Xususiyat ota-elementda belgilanadi.

Keling, ushbu xususiyatning ishlashini namunalar orqali ko‘rib chiqaylik.

Vertikal bo‘yicha markaz va gorizontal bo‘yicha boshiga

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

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

Результат:

Keling, gridimizni debuggerda ko‘ramiz:

Vertikal bo‘yicha oxiri va gorizontal bo‘yicha markaz

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

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

Результат:

Keling, gridimizni debuggerda ko‘ramiz:

Vertikal bo‘yicha boshiga va gorizontal bo‘yicha oxiri

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

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

Результат:

Keling, gridimizni debuggerda ko‘ramiz:

Amaliy vazifalar