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

ग्रिड सेल के अंदर एलिमेंट्स को वर्टिकल अक्ष के साथ अलाइन करने के लिए हम align-items प्रॉपर्टी का उपयोग करते हैं, जिसे पैरेंट एलिमेंट में सेट किया जाता है। इस प्रॉपर्टी के काम को ब्राउज़र डिबगर में ग्रिड देखकर देखा जा सकता है।

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

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

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

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

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

अक्ष के केंद्र के साथ

आइए अब हमारे एलिमेंट्स को सेल के अंदर वर्टिकल अक्ष के केंद्र के साथ अलाइन करें:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

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

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

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

आइए फिर से एलिमेंट्स का अलाइनमेंट बदलें, इस बार वर्टिकल अक्ष के अंत के साथ:

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#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 {
	
}

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

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

एक ग्रिड बनाएं जिसमें छह एलिमेंट हों, जो दो कॉलम में व्यवस्थित हों। सेल के अंदर एलिमेंट्स को वर्टिकल अक्ष की शुरुआत के साथ अलाइन करें।

अब ग्रिड एलिमेंट्स को तीन कॉलम में व्यवस्थित करें और सेल के अंदर एलिमेंट्स को ग्रिड की वर्टिकल अक्ष के केंद्र के साथ अलाइन करें।

पिछली टास्क को इस तरह बदलें कि एलिमेंट्स का अलाइनमेंट वर्टिकल अक्ष के अंत के साथ हो।