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

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

ऊर्ध्वाधर अक्ष की शुरुआत और क्षैतिज अक्ष के अंत में

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

#parent {
	display: grid;
	justify-content: flex-end;
	align-content: 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>

#parent {
	display: grid;
	justify-content: flex-start;
	align-content: flex-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;
}

ऊर्ध्वाधर अक्ष और क्षैतिज अक्ष के केंद्र में

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

#parent {
	display: grid;
	justify-content: flex-end;
	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;
}

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

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

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

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