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

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

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

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

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

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

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

और अब आइए तत्वों का संरेखण वर्टिकल अक्ष के केंद्र के साथ सेट करें:

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

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

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

आइए तत्वों का संरेखण वर्टिकल अक्ष के अंत के साथ सेट करें:

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

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

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

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

अब ग्रिड के तत्वों को दो पंक्तियों में व्यवस्थित करें और ग्रिड की वर्टिकल अक्ष के केंद्र के साथ तत्वों का संरेखण सेट करें।

पिछले कार्य को इस प्रकार बदलें कि तत्वों का संरेखण वर्टिकल अक्ष के अंत के साथ हो।