ग्रिड-कॉलम-एंड प्रॉपर्टी

grid-column-end प्रॉपर्टी ग्रिड या ग्रिड में किसी एलिमेंट की अंतिम स्थिति किसी विशिष्ट कॉलम तक निर्धारित करती है। प्रॉपर्टी का मान एक धनात्मक या ऋणात्मक संख्या हो सकता है। यदि हम एक धनात्मक संख्या निर्दिष्ट करते हैं, तो एलिमेंट की अंतिम स्थिति बाएं से दाएं गिनी जाती है। ऋणात्मक संख्या निर्दिष्ट करने पर एलिमेंट विपरीत क्रम में स्थित होगा, यानी दाएं से बाएं।

grid-column-end प्रॉपर्टी की एक महत्वपूर्ण बारीकी यह है कि निर्दिष्ट कॉलम की संख्या अंतिम स्थिति में शामिल नहीं होती है - यदि हम संख्या 3 निर्धारित करते हैं, तो एलिमेंट केवल पहले और दूसरे कॉलम पर ही कब्जा करेगा।

सिंटैक्स

cssसिलेक्टर {
  grid-column-end: धनात्मक या ऋणात्मक संख्या;
}

उदाहरण

आइए ग्रिड में एलिमेंट्स के लिए अंतिम स्थितियाँ निर्धारित करें:

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

css#parent {
  display: grid;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

#elem1 {
  grid-column-start: 1;
  grid-column-end: 2;
}
#elem2 {
  grid-column-start: 1;
  grid-column-end: 3;
}
#elem3 {
  grid-column-start: 1;
  grid-column-end: 4;
}

Результат:

उदाहरण

और अब grid-column-start प्रॉपर्टी की सहायता से ऐसा करते हैं कि पहला, दूसरा और तीसरा एलिमेंट पहली पंक्ति में स्थित हों। और चौथा एलिमेंट पूरी दूसरी पंक्ति पर कब्जा करे:

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

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

Результат:

उदाहरण

पड़ोसी एलिमेंट्स द्वारा घेरे गए कॉलमों के ओवरलैप होने पर, प्रत्येक बाद वाला एलिमेंट एक पंक्ति नीचे खिसक जाता है। आइए इस विशेषता का उपयोग करके ऐसा करते हैं कि पहला एलिमेंट पहली पंक्ति में स्थित हो, दूसरा - दूसरी में, और तीसरा और चौथा - तीसरी पंक्ति में:

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

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

Результат:

उदाहरण

और अब आइए grid-column-end प्रॉपर्टी में ऋणात्मक संख्याएँ निर्दिष्ट करते हैं:

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

css#parent {
  display: grid;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

#elem1 {
  grid-column-start: 1;
  grid-column-end: -4;
}
#elem2 {
  grid-column-start: 1;
  grid-column-end: -3;
}
#elem3 {
  grid-column-start: 1;
  grid-column-end: -2;
}

Результат:

यह भी देखें