CSS ग्रिड एलिमेंट्स - पैरेंट और चाइल्ड

CSS ग्रिड लेआउट में दो प्रकार के एलिमेंट्स होते हैं: ग्रिड कंटेनर (पैरेंट) और ग्रिड आइटम्स (चाइल्ड)। पैरेंट पर display: grid सेट करने से उसके डायरेक्ट चाइल्ड ग्रिड आइटम्स बन जाते हैं।

उदाहरण: 6 एलिमेंट्स वाला बेसिक ग्रिड

2 कॉलम वाला ग्रिड जिसमें 6 आइटम्स हैं।

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      grid-template-columns: auto auto;  /* 2 कॉलम, ऑटो चौड़ाई */
      padding: 20px;
      gap: 10px;  /* grid-gap का मॉडर्न नाम */
    }
    .ele {
      background-color: orange;
      border: 2px solid gray;
      padding: 25px;
      font-size: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>गेम बोर्ड</h1>
  <div class="container">
    <div class="ele">1</div>
    <div class="ele">2</div>
    <div class="ele">3</div>
    <div class="ele">4</div>
    <div class="ele">5</div>
    <div class="ele">6</div>
  </div>
</body>
</html>

ग्रिड कंटेनर (पैरेंट) प्रॉपर्टीज़

• display: grid / inline-grid
• grid-template-columns / grid-template-rows
• grid-template-areas
• grid-auto-columns / grid-auto-rows
• grid-auto-flow
• gap / row-gap / column-gap
• justify-items / align-items / place-items
• justify-content / align-content / place-content

ग्रिड आइटम (चाइल्ड) प्रॉपर्टीज़

• grid-column-start / grid-column-end / grid-column
• grid-row-start / grid-row-end / grid-row
• grid-area
• justify-self / align-self / place-self
• z-index (लेयरिंग के लिए)

महत्वपूर्ण: केवल डायरेक्ट चाइल्ड

display: grid केवल **डायरेक्ट चाइल्ड्स** को ग्रिड आइटम बनाता है। नेस्टेड एलिमेंट्स ग्रिड आइटम नहीं होते (जब तक वे स्वयं ग्रिड कंटेनर न हों)।