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

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

यदि मान के रूप में हम एक धनात्मक संख्या निर्दिष्ट करते हैं, तो तत्व की स्थिति बाएं से दाएं गिना जाता है। ऋणात्मक संख्या निर्दिष्ट करने पर तत्व विपरीत क्रम में स्थित होगा, यानी दाएं से बाएं।

वाक्य रचना

cssचयनकर्ता {
  grid-column: प्रारंभिक स्थिति / अंतिम स्थिति;
}

उदाहरण

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

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: 1 / 2;
}
#elem2 {
  grid-column: 1 / 3;
}
#elem3 {
  grid-column: 1 / 4;
}

Результат:

उदाहरण

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

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: 1 / -2;
}
#elem2 {
  grid-column: 1 / -3;
}
#elem3 {
  grid-column: 1 / -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: 1 / 2;
}
#elem2 {
  grid-column: 2 / 3;
}
#elem3 {
  grid-column: 3 / 4;
}
#elem4 {
  grid-column: 1 / 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: 1 / 4;
}
#elem2 {
  grid-column: 2 / 3;
}
#elem3 {
  grid-column: 1 / 2;
}
#elem4 {
  grid-column: 3 / 4;
}

Результат:

उदाहरण

grid-column और grid-row गुणों को संयोजित करें:

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;
  grid-template-columns: 2fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  height: 300px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row: 1 / 3;
}
#elem2 {
  grid-row: 1 / 2;
}
#elem3 {
  grid-row: 1 / 2;
}
#elem4 {
  grid-row: 2 / 3;
  grid-column: 2 / 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 id="elem5">5</div>
</div>

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

Результат:

यह भी देखें