CSS ग्रिड में अलग-अलग एलिमेंट को दोनों एक्सेस पर अलाइन करना

किसी अलग एलिमेंट को हॉरिजॉन्टल और वर्टिकल दोनों एक्सेस पर अलाइन किया जा सकता है justify-self और align-self प्रॉपर्टीज को कॉम्बिन करके।

हॉरिजॉन्टल एक्सिस की शुरुआत और वर्टिकल एक्सिस के सेंटर पर

आइए हमारे पहले एलिमेंट को हॉरिजॉन्टल एक्सिस की शुरुआत और वर्टिकल एक्सिस के सेंटर पर अलाइन करें:

<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 {
	justify-self: start;
	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 {
	justify-self: center;
	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 {
	justify-self: end;
	align-self: center;
}

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

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

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

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

अब ऐसा करें कि पांचवें एलिमेंट का अलाइनमेंट हॉरिजॉन्टल एक्सिस की शुरुआत और वर्टिकल एक्सिस की शुरुआत पर हो, और छठे एलिमेंट का - हॉरिजॉन्टल एक्सिस के अंत और वर्टिकल एक्सिस के सेंटर पर हो।