सीएसएस ग्रिड में क्षैतिज अक्ष के साथ सामग्री संरेखण

ग्रिड में न केवल सामग्री को व्यवस्थित करने की आवश्यकता हो सकती है, बल्कि ग्रिड की क्षैतिज अक्ष के साथ इसे संरेखित करने की भी आवश्यकता हो सकती है। इस मामले में, हम justify-content गुण का उपयोग करते हैं, जो मूल तत्व में निर्दिष्ट किया जाता है। आइए उदाहरणों के साथ देखें कि यह गुण कैसे काम करता है।

अक्ष की शुरुआत के साथ

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

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-content: start;
  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-content: 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-content: 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;
}

Результат:

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