CSS ग्रिड सेल के अंदर दोनों अक्षों पर संरेखण

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

अक्षों के केंद्र में

आइए हमारे तत्वों को क्षैतिज और लंबवत अक्षों के केंद्र में संरेखित करें:

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

#parent {
	display: grid;
	justify-items: center;
	align-items: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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;
	justify-items: start;
	align-items: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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;
	justify-items: end;
	align-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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;
}

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

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

तीन पंक्तियों में स्थित पांच तत्वों से युक्त एक ग्रिड बनाएं। सेल में तत्वों को क्षैतिज अक्ष के आरंभ और लंबवत अक्ष के केंद्र में संरेखित करें।

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

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