CSS grid-template-rows प्रॉपर्टी

grid-template-rows प्रॉपर्टी CSS ग्रिड कंटेनर में पंक्तियों (rows) की संख्या और ऊंचाई निर्धारित करती है। आप पिक्सेल, प्रतिशत, fr यूनिट, या auto कीवर्ड का उपयोग कर सकते हैं।

उदाहरण: दो पंक्तियों वाला ग्रिड

यह कोड 70px और 190px ऊंचाई वाली दो पंक्तियाँ बनाता है, जिसमें 20px का गैप है।

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      background-color: blue;
      grid-template-rows: 70px 190px;
      padding: 20px;
      grid-gap: 20px;
    }
    .container > div {
      background-color: orange;
      border: 2px solid gray;
      padding: 35px;
      font-size: 30px;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>गेम बोर्ड</h1>
  <div class="container">
    <div class="ele1">1</div>
    <div class="ele2">2</div>
    <div class="ele3">3</div>
    <div class="ele4">4</div>
    <div class="ele5">5</div>
    <div class="ele6">6</div>
  </div>
</body>
</html>

उपयोगी मान

• grid-template-rows: 100px auto 1fr; - फिक्स्ड, ऑटो, और शेष स्थान
• repeat(3, 1fr) - तीन बराबर पंक्तियाँ
• minmax(100px, auto) - न्यूनतम 100px, अधिकतम ऑटो