CSS ग्रिड में दोनों अक्षों के साथ सेल के अंदर संरेखण के लिए शॉर्टहैंड

place-items शॉर्टहैंड गुण का उपयोग करके ग्रिड सेल के अंदर तत्वों को दोनों अक्षों के साथ एक साथ संरेखित किया जा सकता है। यह गुण दो मान लेता है, जो एक स्थान से अलग होते हैं। पहले मान के साथ हम ऊर्ध्वाधर अक्ष के साथ स्थिति निर्धारित करते हैं, और दूसरे के साथ - क्षैतिज अक्ष के साथ। यह गुण मूल तत्व में निर्धारित किया जाता है।

आइए उदाहरणों के साथ इस गुण के कार्य को देखें।

ऊर्ध्वाधर के केंद्र और क्षैतिज की शुरुआत के साथ

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

#parent {
	display: grid;
	place-items: center 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>

#parent {
	display: grid;
	place-items: end 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>

#parent {
	display: grid;
	place-items: start 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;
}

आइए डिबगर में अपने ग्रिड को देखें:

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

छह तत्वों वाला एक ग्रिड बनाएं और उन्हें दो कॉलम में व्यवस्थित करें। ग्रिड के क्षैतिज अक्ष की शुरुआत और ऊर्ध्वाधर अक्ष के केंद्र के साथ तत्वों को संरेखित करें।

अब ग्रिड तत्वों को तीन कॉलम में व्यवस्थित करें और ग्रिड के क्षैतिज अक्ष के केंद्र और ऊर्ध्वाधर अक्ष के केंद्र के साथ तत्वों का संरेखण निर्धारित करें।

पिछले कार्य को इस तरह बदलें, कि तत्वों का संरेखण ग्रिड के क्षैतिज अक्ष के अंत और ऊर्ध्वाधर अक्ष की शुरुआत के साथ हो।