CSS टॉपिक्स

🎨 CSS Design✨पाठ 12 / 16

CSS Grid 2D सिस्टम

2D लेआउट इंजन: grid-template-columns, fr यूनिट्स, repeat(), minmax() और सेल्स को span करना सीखें।

⏱️~5 मिनट पढ़ाई🟢शुरुआती लेवल⚡लाइव एडिटर पर जाएँ

🎯 इस पाठ में आप क्या सीखेंगे

1.2D लेआउट की शक्ति: पंक्तियों (Rows) और स्तंभों (Columns) को एक साथ नियंत्रित करना।

2.ग्रिड शब्दावली: कंटेनर, ट्रैक्स, लाइन्स, सेल्स और एरियाज का सटीक अर्थ।

3.फ्रैक्शनल यूनिट (`fr`): बची हुई खाली जगह को हिस्सों में बांटने का विज्ञान।

4.होली ग्रेल फॉर्मूला: `repeat(auto-fit, minmax(250px, 1fr))` से बिना मीडिया क्वेरी का रिस्पॉन्सिव ग्रिड।

5.नेम्ड ग्रिड एरियाज: विजुअल ASCII आर्ट की तरह पूरे पेज का खाका (`grid-template-areas`) खींचना।

6.नेक्स्ट-जेन Subgrid: अलग-अलग कार्ड्स के अंदरूनी बटनों और हेडिंग्स को एक समान रेखा में बांधना।

📐 2D CSS ग्रिड की शारीरिक रचना (Anatomy)

फ्लेक्सबॉक्स के विपरीत (जो केवल एक दिशा में काम करता है), CSS ग्रिड एक साथ दोनों दिशाओं का संचालन करता है:

ग्रिड रेखाएं (Grid Lines): पॉजिटिव और नेगेटिव इंडेक्सिंग3 कॉलम = 4 ग्रिड रेखाएं

कॉलम 1
ट्रैक 1

कॉलम 2
ट्रैक 2

कॉलम 3
ट्रैक 3

रेखा 1 (-4)

रेखा 2 (-3)

रेखा 3 (-2)

रेखा 4 (-1)

1. ग्रिड ट्रैक (Track)

किन्हीं दो पास वाली ग्रिड लाइनों के बीच की जगह — यानी एक पूरी पंक्ति या एक पूरा स्तंभ।

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

एक पंक्ति और एक स्तंभ के कटने से बना अकेला डिब्बा (जैसे एक्सेल शीट का एक खाना)।

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

चार रेखाओं से घिरा कोई भी आयताकार क्षेत्र जो कई सेल्स को मिलाकर बनाया गया हो।

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

ट्रैक्स के बीच की खाली जगह (`row-gap` और `column-gap`, शॉर्टहैंड: `gap: 16px`)।

💻 लाइव CSS Grid मास्टरक्लास प्लेग्राउंड

Interactive Live Editor— Edit HTML directly on the left to see live preview on the right

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Grid Masterclass Demo</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

body {
      font-family: system-ui, sans-serif;
      background: #f1f5f9;
      padding: 24px;
      color: #0f172a;
    }

/* 2D Dashboard Grid Layout */
    .dashboard-grid {
      max-width: 600px;
      margin: 0 auto;
      display: grid;
      /* 3 equal columns using fractional units */
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

.grid-cell {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 18px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
    }

/* Spanning Across 3 Columns (Hero Banner) */
    .hero-banner {
      grid-column: span 3;
      background: linear-gradient(135deg, #4f46e5, #7c3aed);
      color: #ffffff;
      border: none;
    }

.hero-banner h2 {
      font-size: 20px;
      font-weight: 800;
      margin-bottom: 6px;
    }

.hero-banner p {
      font-size: 13px;
      color: #e0e7ff;
    }

/* Spanning Across 2 Columns (Main Graph) */
    .main-analytics {
      grid-column: span 2;
    }

.stat-number {
      font-size: 28px;
      font-weight: 800;
      color: #4f46e5;
      margin: 8px 0;
    }

.badge-positive {
      font-size: 11px;
      font-weight: 700;
      color: #16a34a;
      background: #dcfce7;
      padding: 2px 8px;
      border-radius: 6px;
      display: inline-block;
    }
  </style>
</head>
<body>
  <div class="dashboard-grid">
    
    <div class="grid-cell hero-banner">
      <h2>🚀 Welcome back, Developer!</h2>
      <p>Your full-stack learning track has 2 assignments pending this week.</p>
    </div>

<div class="grid-cell main-analytics">
      <span style="font-size: 12px; font-weight: 600; color: #64748b;">CODING ACTIVITY</span>
      <div class="stat-number">48.5 hrs</div>
      <span class="badge-positive">&uarr; 18% vs last week</span>
    </div>

<div class="grid-cell">
      <span style="font-size: 12px; font-weight: 600; color: #64748b;">STREAK</span>
      <div class="stat-number" style="color: #ea580c;">🔥 14</div>
      <p style="font-size: 12px; color: #64748b;">Consecutive days</p>
    </div>

<div class="grid-cell">
      <h4 style="font-size: 13px; color: #64748b;">HTML</h4>
      <p style="font-size: 18px; font-weight: 700; margin-top: 4px;">100% Done</p>
    </div>
    <div class="grid-cell">
      <h4 style="font-size: 13px; color: #64748b;">CSS</h4>
      <p style="font-size: 18px; font-weight: 700; margin-top: 4px;">In Progress</p>
    </div>
    <div class="grid-cell">
      <h4 style="font-size: 13px; color: #64748b;">JavaScript</h4>
      <p style="font-size: 18px; font-weight: 700; margin-top: 4px;">Up Next</p>
    </div>
  </div>
</body>
</html>

Click & type to editHTML5

Browser Preview

🏆 होली ग्रेल फॉर्मूला: बिना मीडिया क्वेरी के रिस्पॉन्सिव कार्ड्स

CSS की इस अकेली जादुई लाइन ने इंटरनेट पर लिखी जाने वाली हजारों पंक्तियों की मीडिया क्वेरीज़ को हमेशा के लिए विदा कर दिया:

// आधुनिक वेब कार्ड्स को शक्ति देने वाला अकेला फॉर्मूला

grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

repeat()

ब्राउज़र को उपलब्ध चौड़ाई में बार-बार लूप चलाकर कॉलम बनाने का निर्देश देता है।

auto-fit

गिनता है कि कितने कॉलम आ सकते हैं। कम कार्ड्स होने पर खाली ट्रैक्स को समेटकर कार्ड्स को फैला देता है।

minmax(260px, 1fr)

प्रत्येक कॉलम कम से कम 260px का होगा, और जगह बचने पर `1fr` से बराबर फैल जाएगा!

⚠️ auto-fit बनाम auto-fill: मुख्य अंतर

कल्पना कीजिए कि 1200px की चौड़ी स्क्रीन पर केवल 2 प्रोडक्ट कार्ड्स हैं:

auto-fill: खाली जगह में अदृश्य भूतिया खांचे बनाकर पंक्ति भर देता है। दोनों कार्ड्स 260px के छोटे ही रह जाते हैं।
auto-fit: खाली खांचों को 0px कर देता है! दोनों कार्ड्स फैलकर 600px (`1fr`) के होकर पूरी स्क्रीन को खूबसूरती से भर लेते हैं।

🗺️ विजुअल ASCII लेआउट्स: `grid-template-areas`

CSS ग्रिड में आप किसी चित्रकार की तरह अपने कोड में ही पूरे वेब पेज का नक्शा खींच सकते हैं:

ASCII कंटेनर का नक्शा:

.page-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
}

कमरों में तत्वों को रखना:

.site-header  { grid-area: header; }
.site-sidebar { grid-area: sidebar; }
.site-content { grid-area: main; }
.site-footer  { grid-area: footer; }

/* मोबाइल पर 1 लाइन में री-ऑर्डर! */
@media (max-width: 768px) {
  .page-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

कोड का पंक्ति-दर-पंक्ति विश्लेषण

display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;

2D ग्रिड शुरू करता है जिसमें 3 बिल्कुल बराबर कॉलम (प्रत्येक 1fr) 16px के अंतराल के साथ बनते हैं।

.hero-banner { grid-column: span 3; }

हीरो बैनर को पहली पंक्ति में तीनों कॉलमों पर फैलने का आदेश देता है।

.main-analytics { grid-column: span 2; }

दूसरी पंक्ति पर 2 कॉलम की जगह लेता है, जिससे तीसरा कॉलम स्ट्रीक विजेट के लिए खाली बच जाता है।

🧠 अपनी समझ की जाँच करें: CSS Grid

Q1CSS ग्रिड का विख्यात फॉर्मूला `grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));` क्या कमाल करता है?

Q2जब किसी बड़ी स्क्रीन पर कंटेनर में सिर्फ 2 कार्ड्स हों, तो `auto-fill` और `auto-fit` में क्या बड़ा अंतर दिखता है?

Q3किसी ग्रिड में चाहे जितने भी कॉलम हों, किसी तत्व को पहली लाइन से लेकर अंतिम लाइन तक पूरी चौड़ाई में फैलाने (Full-bleed) के लिए कौन-सा सिंटैक्स लिखा जाता है?

Q4सीनियर डेवलपर्स ग्रिड कॉलम के लिए सीधे `1fr` लिखने के बजाय `minmax(0, 1fr)` क्यों लिखते हैं?

🛠️

प्रैक्टिस चैलेंज: पूरे ग्रिड पर फैला फुटर बनाएं

दाएँ हाथ के लाइव कोड एडिटर में:

स्टेप 1: HTML में `.dashboard-grid` के सबसे नीचे नया एलिमेंट जोड़ें: <div class="grid-cell footer-bar">📌 प्रो टिप: रविवार से पहले असाइनमेंट पूरा करें!</div>।
स्टेप 2: CSS में नया नियम लिखें: .footer-bar { grid-column: 1 / -1; background: #f1f5f9; text-align: center; font-weight: 600; }।
स्टेप 3: देखें कि कैसे रेखा निर्देशांक 1 / -1 का उपयोग करके फुटर अपने आप तीनों कॉलमों पर छा जाता है!
स्टेप 4 (बोनस): grid-template-columns: repeat(3, 1fr); को बदलकर repeat(auto-fit, minmax(180px, 1fr)); करें और देखें कि ग्रिड कैसे फ्लूइड बन जाता है!

💡 सही समाधान कोड देखने के लिए यहाँ क्लिक करें

.footer-bar { grid-column: 1 / -1; background: #f1f5f9; text-align: center; font-weight: 600; color: #475569; border: 1px dashed #cbd5e1; }

सामान्य गलतियाँ और सीनियर डेवलपर इंटरव्यू प्रश्न

❌ गलती: 1fr कॉलम का स्क्रीन से बाहर भागना

जब ग्रिड आइटम में कोई कोड स्निपेट, टेबल या बड़ी इमेज होती है, तो grid-template-columns: 1fr 1fr स्क्रीन से बाहर चौड़ा हो जाता है! क्यों? क्योंकि ट्रैक्स का डिफ़ॉल्ट न्यूनतम आकार `auto` होता है। इसे सुरक्षित रखने के लिए हमेशा minmax(0, 1fr) लिखें!

✅ प्रो टिप: CSS Subgrid (`subgrid`)

CSS ग्रिड लेवल 2 में अंदरूनी बच्चे grid-template-rows: subgrid; के जरिए पैरेंट के ग्रिड ट्रैक्स साझा कर सकते हैं। इससे अलग-अलग कार्ड्स के अंदर मौजूद टाइटल, विवरण और बटन्स अलग-अलग लंबाई के बावजूद एक-दूसरे के साथ बिल्कुल समानांतर सीध में रहते हैं!

💬 Interview Q: CSS Subgrid क्या है और यह किस बड़ी समस्या को सुलझाता है?

पहले 3 कॉलम वाले कार्ड ग्रिड में हर कार्ड का अपना अलग फ्लो होता था। यदि कार्ड 1 का टाइटल 3 लाइनों का हो और कार्ड 2 का टाइटल 1 लाइन का, तो उनके नीचे के बटन ऊपर-नीचे टेढ़े-मेढ़े हो जाते थे।

Subgrid इसे चुटकियों में हल करता है: कार्ड पर grid-row: span 3; display: grid; grid-template-rows: subgrid; लगाने से हर कार्ड का टाइटल, बॉडी और बटन सीधे मुख्य ग्रिड की पंक्तियों में हिस्सा लेते हैं! सभी टाइटल पंक्ति 1 की ऊंचाई साझा करते हैं और सभी बटन पंक्ति 3 पर एक सीध में आ जाते हैं।

💬 Interview Q: `grid-auto-flow: dense` क्या काम करता है और इसमें एक्सेसिबिलिटी का क्या खतरा है?

डिफ़ॉल्ट रूप से ग्रिड आइटम्स को कड़े HTML क्रम में रखता है। यदि कोई बड़ा आइटम फिट नहीं होता, तो ब्राउज़र उस जगह को खाली छोड़ कर अगली पंक्ति में चला जाता है।

grid-auto-flow: dense; लगाने पर ब्राउज़र DOM में आगे जाकर छोटे आइटम्स को पीछे खींच लाता है और खाली गड्ढों को भर देता है!

एक्सेसिबिलिटी चेतावनी: इससे स्क्रीन पर दिखने वाला क्रम और कोड का क्रम अलग हो जाता है। कीबोर्ड से Tab दबाने वाले यूज़र्स स्क्रीन पर पागलों की तरह यहाँ-वहाँ कूदते हैं, जिससे WCAG 2.4.3 Focus Order का उल्लंघन होता है।

💬 Interview Q: CSS Grid में `*-items` और `*-content` में क्या अंतर है?

*-items (सेल्स के अंदर): प्रत्येक बच्चे को उसकी अपनी ग्रिड सेल के अंदर संरेखित करता है (`justify-items` = सेल में क्षैतिज, `align-items` = सेल में लंबवत)।
*-content (पूरी पटरियों का समूह): केवल तब काम करता है जब पूरा ग्रिड कंटेनर से छोटा हो! यह ग्रिड ट्रैक्स के पूरे समूह को कंटेनर के अंदर संरेखित करता है (`justify-content` = पूरे ग्रिड को दाएँ/बाएँ ले जाना, `align-content` = पूरे ग्रिड को ऊपर/नीचे ले जाना)।

अगला लेसनResponsive & Media Queries