CSS ग्रिड में पंक्तियों का विलय

ग्रिड में पंक्तियाँ और कॉलम एक जाली बनाते हैं। ऐसा किया जा सकता है कि एक तत्व जाली की एक कोशिका के बजाय कई कोशिकाओं पर कब्जा कर ले।

किसी तत्व को एक से अधिक पंक्ति पर कब्जा करवाने के लिए, उसे grid-row गुण दिया जाना चाहिए। इस गुण में स्लैश के माध्यम से ऐसी संख्याएँ निर्दिष्ट की जाती हैं जो ग्रिड में तत्वों की प्रारंभिक और अंतिम स्थिति को दर्शाती हैं।

इस मामले में, तत्व पहली स्थिति से दूसरी स्थिति तक फैल जाएगा (इसे शामिल किए बिना)। यानी मान 1 / 2 तत्व को पहली कोशिका पर कब्जा करने के लिए मजबूर करेगा, और मान 1 / 3 तत्व को पहली और दूसरी कोशिका पर कब्जा करने के लिए मजबूर करेगा (लेकिन तीसरी कोशिका को शामिल किए बिना)।

उदाहरण

मान लीजिए कि हमारे पास तीन चाइल्ड एलिमेंट के साथ एक ग्रिड है। आइए उन्हें इस तरह व्यवस्थित करें कि पहला तत्व दो पंक्तियों पर कब्जा कर ले:

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

css#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: 1 / 3; /* दो पंक्तियाँ */
}
#elem2 {
  grid-row: 1 / 2;
}
#elem3 {
  grid-row: 2 / 3;
}

Результат:

उदाहरण

अब आइए चौथे ब्लॉक को तीन पंक्तियाँ निर्दिष्ट करें:

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;
  height: 300px;
  width: 400px;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row: 1 / 2;
}
#elem2 {
  grid-row: 2 / 3;
}
#elem3 {
  grid-row: 3 / 4;
}
#elem4 {
  grid-row: 1 / 4;
}

Результат:

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