CSS ग्रिड लाइन्स - कॉलम और रो लाइन्स

ग्रिड लाइन्स (Grid Lines) ग्रिड ट्रैक्स (रो और कॉलम) को विभाजित करने वाली रेखाएं हैं। ये ग्रिड आइटम्स को पोज़िशन करने के लिए संदर्भ बिंदु प्रदान करती हैं।

ग्रिड लाइन्स के प्रकार

• कॉलम लाइन्स (Column Lines): ऊर्ध्वाधर रेखाएं जो कॉलम को अलग करती हैं
• रो लाइन्स (Row Lines): क्षैतिज रेखाएं जो रो को अलग करती हैं

उदाहरण: ग्रिड लाइन्स के साथ आइटम पोज़िशनिंग

grid-row-start: 1; grid-row-end: 6 से पहला आइटम 5 रो ट्रैक्स फैलाता है (लाइन 1 से 6 तक)।

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      background-color: green;
      grid-template-columns: auto auto;
      padding: 20px;
      grid-gap: 20px;  /* gap का पुराना नाम */
    }
    .container > div {
      background-color: orange;
      border: 2px solid gray;
      padding: 35px;
      font-size: 30px;
      text-align: center;
    }
    .ele1 {
      grid-row-start: 1;
      grid-row-end: 6;  /* लाइन 1 से 6 तक = 5 रो ट्रैक्स */
    }
  </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>

ग्रिड लाइन नंबरिंग

/* 3 कॉलम, 2 रो ग्रिड */

कॉलम लाइन्स:  ①  ②  ③  ④
                │  │  │  │
             ① ┌──┼──┼──┐
                │  │  │  │
             ② ├──┼──┼──┤  ← रो लाइन्स
                │  │  │  │
             ③ └──┴──┴──┘

/* ऋणात्मक नंबरिंग (अंत से) */
कॉलम लाइन्स:  1   2   3   4
               -4  -3  -2  -1  (उल्टा क्रम)

ग्रिड लाइन्स के साथ आइटम प्लेसमेंट

.item {
  /* लाइन नंबर से */
  grid-column-start: 1;
  grid-column-end: 3;        /* लाइन 1 से 3 तक = 2 कॉलम */
  
  /* स्पैन कीवर्ड */
  grid-row: 2 / span 3;      /* लाइन 2 से शुरू, 3 रो फैलाओ */
  
  /* नामित लाइन्स */
  grid-column: header-start / header-end;
}

मॉडर्न: gap प्रॉपर्टी

grid-gap अब gap है (फ्लेक्सबॉक्स में भी काम करता है)।