CSS ग्रिड लेआउट - अवलोकन

CSS ग्रिड लेआउट एक दो-आयामी (2D) लेआउट सिस्टम है जो पंक्तियों (रो) और कॉलम्स दोनों को एक साथ नियंत्रित करता है। यह पेज-लेवल लेआउट, डैशबोर्ड, जटिल इंटरफेस के लिए आदर्श है।

ग्रिड लेआउट के मुख्य घटक

1. ग्रिड एलिमेंट्स

• ग्रिड कंटेनर (पैरेंट): display: grid वाला एलिमेंट
• ग्रिड आइटम्स (चाइल्ड): कंटेनर के डायरेक्ट चाइल्ड्स

2. ग्रिड ट्रैक्स (Tracks)

• ग्रिड रो (Rows): ग्रिड आइटम्स की क्षैतिज (हॉरिजॉन्टल) पंक्तियाँ
• ग्रिड कॉलम (Columns): ग्रिड आइटम्स की ऊर्ध्वाधर (वर्टिकल) पंक्तियाँ

3. ग्रिड लाइन्स (Lines)

• ट्रैक्स को विभाजित करने वाली रेखाएं
• संख्या से संदर्भित: 1, 2, 3... या -1, -2 (अंत से)
• नामित भी की जा सकती हैं: [header-start]

4. ग्रिड सेल (Cell)

एक रो और एक कॉलम का प्रतिच्छेदन - ग्रिड की सबसे छोटी इकाई।

5. ग्रिड एरिया (Area)

एक से अधिक सेल्स से बना आयताकार क्षेत्र। grid-template-areas से नामित किया जा सकता है।

6. ग्रिड गैप (Gap)

रो और कॉलम के बीच की दूरी। gap, row-gap, column-gap।

बेसिक ग्रिड कंटेनर

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 बराबर कॉलम */
  grid-template-rows: auto 1fr auto;      /* हेडर, कंटेंट, फुटर */
  gap: 20px;
  min-height: 100vh;
}

ग्रिड vs फ्लेक्सबॉक्स