CSS ग्रिड सेल के अंदर वर्टिकल अक्ष के साथ अलाइनमेंट

ग्रिड सेल के अंदर एलिमेंट्स को वर्टिकल अक्ष के साथ अलाइन करने के लिए हम align-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;
  align-items: flex-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-items: 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 id="elem1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

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

Результат:

आइए हमारे ग्रिड को ब्राउज़र डिबगर में देखें:

प्रैक्टिकल टास्क्स