सीएसएस ग्रिड में पंक्तियों की संख्या और चौड़ाई

ग्रिड तत्वों को पंक्तियों में भी रखा जा सकता है। इसके लिए grid-template-rows गुण है। यह गुण पंक्तियों के आकार रिक्त स्थान से अलग करके लेता है। इसमें वही मान लागू किए जा सकते हैं जो हमने कॉलम के लिए पढ़े थे।

उदाहरण

उदाहरण के लिए, आइए ब्लॉकों को चार पंक्तियों में रखें:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 50px 100px 50px 50px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

उदाहरण

पहली और तीसरी पंक्ति के लिए पिक्सेल में निश्चित चौड़ाई निर्दिष्ट करें, और दूसरी पंक्ति को बची हुई जगह लेने दें:

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

css#parent {
  display: grid;
  grid-template-rows: 100px auto 60px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

उदाहरण

पंक्तियों के आकार निर्दिष्ट करने के लिए repeat फ़ंक्शन का उपयोग करें:

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

css#parent {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

उदाहरण

पंक्तियों की ऊंचाई 50px निर्दिष्ट करें, और पंक्तियों की संख्या auto-fill मान का उपयोग करके स्वचालित रूप से सेट करें:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: repeat(auto-fill, 50px);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

प्रायोगिक कार्य