ग्रिड-पंक्ति-अंत गुण

grid-row-end गुण ग्रिड या ग्रिड में पंक्तियों के साथ तत्व की अंतिम स्थिति निर्धारित करता है। गुण का मान एक धनात्मक या ऋणात्मक संख्या हो सकता है। यदि हम एक धनात्मक संख्या निर्दिष्ट करते हैं, तो तत्व की प्रारंभिक स्थिति ऊपर से नीचे की ओर गिनती की जाती है। ऋणात्मक संख्या निर्दिष्ट करने पर तत्व विपरीत क्रम में स्थित होगा, यानी नीचे से ऊपर की ओर।

वाक्य - विन्यास

चयनकर्ता {
	grid-row-end: धनात्मक या ऋणात्मक संख्या;
}

उदाहरण

आइए ग्रिड में तत्वों को अंतिम स्थितियाँ निर्दिष्ट करें:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row-start: 1;
	grid-row-end: 2;
}
#elem2 {
	grid-row-start: 2;
	grid-row-end: 3;
}
#elem3 {
	grid-row-start: 3;
	grid-row-end: 4;
}

उदाहरण

आइए पहले ब्लॉक को दो पंक्तियाँ लेने दें:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr;
	height: 300px;
	width: 400px;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row-start: 1;
	grid-row-end: 3;
}
#elem2 {
	grid-row-start: 1;
	grid-row-end: 2;
}
#elem3 {
	grid-row-start: 2;
	grid-row-end: 3;
}

उदाहरण

अब चौथे ब्लॉक को तीन पंक्तियाँ नियत करते हैं:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr;
	height: 300px;
	width: 400px;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row-start: 1;
	grid-row-end: 2;
}
#elem2 {
	grid-row-start: 2;
	grid-row-end: 3;
}
#elem3 {
	grid-row-start: 3;
	grid-row-end: 4;
}
#elem4 {
	grid-row-start: 1;
	grid-row-end: 4;
}

उदाहरण

और अब grid-row-start और grid-row-end गुणों में ऋणात्मक संख्याएँ निर्दिष्ट करते हैं। अब elem3 सबसे ऊपरी पंक्ति लेगा, और elem1 - सबसे निचली पंक्ति:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row-start: -1;
	grid-row-end: -2;
}
#elem2 {
	grid-row-start: -2;
	grid-row-end: -3;
}
#elem3 {
	grid-row-start: -3;
	grid-row-end: -4;
}

यह भी देखें

grid-row-start गुण,
जो ग्रिड में पंक्तियों के साथ तत्व की प्रारंभिक स्थिति निर्धारित करता है
grid-row गुण,
जो ग्रिड में पंक्तियों के साथ तत्व की प्रारंभिक और अंतिम स्थितियाँ निर्धारित करता है
grid-template-rows गुण,
जो ग्रिड में पंक्तियों की संख्या और चौड़ाई निर्धारित करता है
grid-auto-rows गुण,
जो अंतर्निहित ग्रिड में पंक्तियों की संख्या और चौड़ाई निर्धारित करता है