CSS grid-template-rows - ग्रिड कंटेनर में प्रत्येक रो की ऊंचाई

grid-template-rows प्रॉपर्टी CSS ग्रिड कंटेनर में प्रत्येक रो (पंक्ति) की ऊंचाई परिभाषित करती है। यह रो ट्रैक्स के आकार को स्पष्ट रूप से नियंत्रित करती है।

उदाहरण: तीन रो वाली ग्रिड, अलग-अलग ऊंचाई

पहली रो 120px, दूसरी 90px, तीसरी 100px ऊंची है। 6 आइटम्स 3 रो में वितरित होते हैं।

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      background-color: gray;
      grid-template-rows: 120px 90px 100px;  /* तीन रो, अलग ऊंचाई */
      padding: 20px;
      grid-gap: 20px;
    }
    .container > div {
      background-color: yellow;
      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 मान

सामान्य पैटर्न

/* हेडर फिक्स्ड, कंटेंट फ्लेक्सिबल, फुटर फिक्स्ड */
grid-template-rows: 60px 1fr 40px;

/* सभी रो बराबर */
grid-template-rows: repeat(4, 1fr);

/* रिस्पॉन्सिव: न्यूनतम 200px, अधिकतम 1fr */
grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));

नामित ग्रिड लाइन्स

grid-template-rows: 
  [header-start] 60px [header-end main-start] 
  1fr [main-end footer-start] 
  40px [footer-end];