ग्रिड-कॉलम-स्टार्ट गुण

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

सिंटैक्स

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

उदाहरण

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

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</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;
}
#elem2 {
  grid-column-start: 2;
}
#elem3 {
  grid-column-start: 3;
}

Результат:

उदाहरण

और अब grid-column-start गुण में ऋणात्मक संख्याएँ निर्दिष्ट करते हैं:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</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;
}
#elem2 {
  grid-column-start: -2;
}
#elem3 {
  grid-column-start: -3;
}

Результат:

उदाहरण

और अब grid-column-end गुण की सहायता से ऐसा करते हैं कि पहला, दूसरा और तीसरा तत्व पहली पंक्ति में स्थित हों। और चौथा तत्व पूरी दूसरी पंक्ति घेरे:

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;
}

Результат:

यह भी देखें