justify-self प्रॉपर्टी

justify-self प्रॉपर्टी ग्रिड में किसी अलग एलिमेंट का हॉरिजॉन्टल अक्ष पर अलाइनमेंट सेट करती है। यह प्रॉपर्टी उसी एलिमेंट में लागू होती है जिसे हम अलाइन करना चाहते हैं।

सिंटैक्स

cssएलिमेंट {
  justify-self: start | center | 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 {
  justify-self: 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 {
  justify-self: center;
}

Результат:

उदाहरण . हॉरिजॉन्टल अक्ष के अंत पर अलाइनमेंट

आइए पहले एलिमेंट के लिए अलाइनमेंट हॉरिजॉन्टल अक्ष के अंत पर सेट करें:

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 {
  justify-self: end;
}

Результат:

यह भी देखें