सीएसएस ग्रिड में अलग-अलग एलिमेंट का वर्टिकल अक्ष के साथ अलाइनमेंट
इसी तरह से align-self प्रॉपर्टी का उपयोग करके
एलिमेंट्स को वर्टिकल अक्ष के साथ
अलाइन किया जा सकता है।
आइए उदाहरणों के माध्यम से देखें
कि यह कैसे काम करता है।
वर्टिकल अक्ष की शुरुआत के साथ
आइए पहले एलिमेंट को वर्टिकल अक्ष की शुरुआत के साथ अलाइन करें:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
display: grid;
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;
}
#elem1 {
align-self: start;
}
:
वर्टिकल अक्ष के केंद्र के साथ
आइए पहले एलिमेंट को वर्टिकल अक्ष के केंद्र के साथ अलाइन करें:
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
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;
}
#elem1 {
align-self: center;
}
:
वर्टिकल अक्ष के अंत के साथ
आइए हमारे ग्रिड में पहले एलिमेंट को वर्टिकल अक्ष के अंत के साथ अलाइन करें:
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
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;
}
#elem1 {
align-self: end;
}
:
प्रैक्टिकल टास्क
दो कॉलम में पाँच एलिमेंट वाला एक ग्रिड बनाएँ। तीसरे एलिमेंट को ग्रिड की वर्टिकल अक्ष की शुरुआत के साथ अलाइन करें।
अब ग्रिड के एलिमेंट्स को तीन कॉलम में व्यवस्थित करें और दूसरे एलिमेंट को ग्रिड की वर्टिकल अक्ष के केंद्र के साथ अलाइन करें।
पिछली टास्क को इस तरह बदलें कि चौथे और पाँचवें एलिमेंट का अलाइनमेंट क्रमशः वर्टिकल अक्ष के अंत और शुरुआत के साथ हो।
