Хосияти place-self

Хосияти place-self ҷойгиркунии элементҳои ҷудогона дар Grid-ро дар ҳамон ҳол дар меҳвари амудӣ ва уфуқӣ муайян мекунад. Дар қимати хосият аввалан ҷойгиркунии амудӣ ва баъдан ҷойгиркунии элементҳои ҷудогона дар Grid дар меҳвари уфуқӣ ишора карда мешавад. Хосият дар он элементе муайян карда мешавад, ки мо мехоҳем ҷойгир кунем.

Синтаксис

cssэлемент {
  place-self: қимат барои амудӣ қимат барои уфуқӣ;
}

Мисол . Ҷойгиркунӣ дар маркази меҳвари амудӣ ва оғози меҳвари уфуқӣ

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

css#parent {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}
#elem1 {
  place-self: center start;
}

Результат:

Мисол . Ҷойгиркунӣ дар оғози меҳвари амудӣ ва поёни меҳвари уфуқӣ

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

css#parent {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}
#elem1 {
  place-self: start end;
}

Результат:

Мисол . Ҷойгиркунӣ дар поёни меҳвари амудӣ ва дар маркази меҳвари уфуқӣ

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

css#parent {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}
#elem1 {
  place-self: end center;
}

Результат:

Инчунин нигаред