CSS гриддаги ҳужайралар ичидаги элементларни икки ўқ бўйича текислаш учун қисқартма

place-items қисқартма хусусияти ёрдамида грид ҳужайралари ичидаги элементларни икки ўқ бўйича бир вақтда текислаш мумкин. Хусусият бошлиқ билан ажратилган икита қийматни қабул қилади. Биринчи қиймат билан биз элементни тик ўқ бўйича, иккинчиси билан эса - горизонтал ўқ бўйича жойлашувини белгилаймиз. Хусусият ота-элементда белгиланади.

Келинг, бу хусусиятнинг ишлашини мисолларда кўриб чиқайлик.

Тик ўқ бўйича марказга ва горизонтал ўқ бўйича бошланғич нуқтага

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

Результат:

Гридимизни debugger да кўриб чиқайлик:

Тик ўқ бўйича охирги нуқтага ва горизонтал ўқ бўйича марказга

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

Результат:

Гридимизни debugger да кўриб чиқайлик:

Тик ўқ бўйича бошланғич нуқтага ва горизонтал ўқ бўйича охирги нуқтага

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

Результат:

Гридимизни debugger да кўриб чиқайлик:

Амалий машқлар