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

justify-items प्रॉपर्टी ग्रिड सेल के अंदर तत्वों का क्षैतिज अक्ष के साथ संरेखण निर्धारित करती है। संरेखण सबसे स्पष्ट रूप से ब्राउज़र डिबगर में ग्रिड देखने पर noticeable होता है। यह पैरेंट एलिमेंट पर लागू होता है।

सिंटैक्स

cssसिलेक्टर {
  justify-items: flex-start | flex-end | center ;
}

वैल्यूज

उदाहरण . क्षैतिज अक्ष की शुरुआत के साथ संरेखण

आइए हमारे तत्वों को क्षैतिज अक्ष की शुरुआत के साथ संरेखित करें:

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

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

Результат:

और अब डिबगर में हमारा ग्रिड देखें:

उदाहरण . क्षैतिज अक्ष के केंद्र के साथ संरेखण

आइए हमारे तत्वों को क्षैतिज अक्ष के केंद्र के साथ संरेखित करें:

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

css#parent {
  display: grid;
  justify-items: center;
  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;
}

Результат:

ब्राउज़र डिबगर को कनेक्ट करके हम अपना ग्रिड देखेंगे:

उदाहरण . क्षैतिज अक्ष के अंत के साथ संरेखण

आइए हमारे तत्वों को क्षैतिज अक्ष के अंत के साथ संरेखित करें:

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

css#parent {
  display: grid;
  justify-items: end;
  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;
}

Результат:

अब डिबगर के माध्यम से ग्रिड देखें:

यह भी देखें