CSS ग्रिड सेल के भीतर क्षैतिज अक्ष के साथ संरेखण

ग्रिड सेल के भीतर तत्वों को संरेखित करने के लिए, अर्थात, कॉलम और पंक्तियों के प्रतिच्छेदन पर उत्पन्न होने वाले क्षेत्रों, justify-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;
  justify-items: start;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
  padding: 10px;
  height: 200px;
  width: 400px;
  border: 2px solid #696989;
}
#parent > div {
  grid-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);
  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;
}

Результат:

और अब डिबगर में अपने ग्रिड को देखें:

अक्ष के अंत के साथ

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

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

Результат:

और अब डिबगर में अपने ग्रिड को देखें:

व्यावहारिक कार्य