ग्रिड-टेम्पलेट-रोज़ गुण

grid-template-rows गुण ग्रिड या ग्रिड में तत्व द्वारा घेरी जाने वाली पंक्तियों की संख्या और चौड़ाई निर्धारित करता है। गुण के मान में हम पंक्तियों की चौड़ाई किसी भी आकार की इकाइयों में निर्दिष्ट करते हैं। यह गुण मूल तत्व में निर्दिष्ट होता है और चाइल्ड तत्वों की पंक्तियों की चौड़ाई निर्धारित करता है।

पिक्सेल में मान निर्दिष्ट करने पर पंक्तियों के आकार बिल्कुल उनके अनुरूप होंगे। यदि हम auto शब्द निर्दिष्ट करते हैं, तो पंक्तियाँ सभी उपलब्ध स्थान भर देंगी। fr (अंश) इकाई का उपयोग करने का अर्थ है, कि सभी स्थान को समान भागों में विभाजित किया जाएगा। fr का लाभ है इसकी विभिन्न कंटेनरों या स्क्रीन रिज़ॉल्यूशन के लिए अनुकूलन क्षमता, क्योंकि fr बिना पिक्सेल में सटीक आकार के लिंक के उन्हें निर्दिष्ट संख्या में अंशों में विभाजित कर देता है।

सिंटैक्स

cssसिलेक्टर {
  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: 400px;
}
#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: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

उदाहरण

अब grid-template-rows गुण की सहायता से ऐसा करें कि पहली और दूसरी पंक्तियाँ कंटेनर का एक भाग लें, और तीसरी पंक्ति - तीन भाग:

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

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

Результат:

उदाहरण

fr इकाइयों में निर्दिष्ट मान भिन्नात्मक रूप ले सकते हैं। आइए पिछले उदाहरण को बदलते हुए, दूसरी और तीसरी पंक्तियों के लिए चौड़ाई भिन्नात्मक संख्याओं में निर्दिष्ट करें:

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

css#parent {
  display: grid;
  grid-template-rows: 1fr 0.5fr 2.5fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

उदाहरण

आइए grid-template-rows गुण में 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: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

उदाहरण

अब आइए पिछले उदाहरण को इस तरह बदलें कि तीन समान पंक्तियों के साथ चौथी पंक्ति जुड़ जाए, जो कंटेनर के दो अंश लेगी:

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(3, 1fr) 2fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

उदाहरण

आइए पहली दो पंक्तियों को कंटेनर के एक अंश में चौड़ाई दें और अंतिम दो पंक्तियों को - दो अंशों में:

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(2, 1fr) repeat(2, 2fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

उदाहरण

अब आइए पंक्तियों की चौड़ाई निर्धारित करें repeat() फ़ंक्शन और मुक्त इकाइयों fr का उपयोग करके निर्दिष्ट मानों को संयोजित करते हुए:

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

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

Результат:

उदाहरण

repeat() फ़ंक्शन में 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;
}

Результат:

उदाहरण

auto-fill के साथ minmax फ़ंक्शन को निर्दिष्ट करना बहुत सुविधाजनक है, जो पंक्तियों की चौड़ाई की सीमा न्यूनतम से अधिकतम मान तक निर्धारित करता है। यदि कंटेनर की चौड़ाई सभी पंक्तियों को समाहित नहीं कर पाती है, तो उनमें से कुछ नई पंक्ति में चले जाएंगे, जबकि पंक्ति में पंक्तियाँ उसमें समान रूप से वितरित हो जाएंगी। आइए पिछले उदाहरण को बदलते हुए, इसमें minmax फ़ंक्शन निर्दिष्ट करें:

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, minmax(50px, 1fr));
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

उदाहरण

अब आइए auto-fit गुण निर्दिष्ट करें, जो 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-fit, minmax(100px, 1fr));
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

उदाहरण

fr के साथ-साथ % में मानों का भी उपयोग किया जा सकता है, जो यह भी निर्धारित करते हैं कि पंक्ति कंटेनर का कितना भाग लेगी। इस मामले में, पहले % में पंक्ति का आकार गणना की जाएगी, और शेष खाली स्थान अंशों में विभाजित हो जाएगा:

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

css#parent {
  display: grid;
  grid-template-rows: 50% 1fr 2fr 30%;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

उदाहरण

आइए एक साथ गुणों का उपयोग करें grid-template-columns और grid-template-rows:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

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

Результат:

उदाहरण

आइए गुणों की सहायता से grid-template-columns और grid-template-rows नौ कोशिकाओं वाली एक तालिका बनाएं, जो तीन पंक्तियों में स्थित हों। इसके अलावा दूसरी और तीसरी पंक्ति की चौड़ाई समान होगी, और प्रत्येक कॉलम - विभिन्न चौड़ाई का होगा:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 60px 1fr 60px;
  grid-template-columns: 20% 1fr 15%;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

उदाहरण

अब पिछले उदाहरण की तालिका में ऊपरी पंक्ति को दो अंशों में चौड़ा करें, और पहला कॉलम - आधे अंश में:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 2fr 1fr 1fr;
  grid-template-columns: 0.5fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

यह भी देखें