सीएसएस ग्रिड में सामग्री को वर्टिकल अक्ष के साथ संरेखित करना

ग्रिड की वर्टिकल अक्ष के साथ सामग्री को संरेखित करने के लिए हम align-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;
  align-content: start;
  grid-template-columns: 100px 100px;
  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;
  align-content: center;
  grid-template-columns: 100px 100px;
  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;
  align-content: end;
  grid-template-columns: 100px 100px;
  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;
}

Результат:

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