गुण place-self

गुण place-self ग्रिड में एक अलग तत्व का संरेखण ऊर्ध्वाधर और क्षैतिज दोनों अक्षों पर एक साथ सेट करता है। गुण के मान में पहले ऊर्ध्वाधर संरेखण को निर्दिष्ट किया जाता है, दूसरे - क्षैतिज अक्ष के साथ ग्रिड में एक अलग तत्व का संरेखण। यह गुण उस तत्व में सेट किया जाता है जिसे हम संरेखित करना चाहते हैं।

सिंटैक्स

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

Результат:

यह भी देखें