CSS Subgrid से लागू होने वाला नया लेआउट

• CSS Subgrid मौजूदा Grid की सीमाओं से आगे बढ़कर parent grid structure को निचले DOM elements तक विस्तारित करने वाली एक feature है
• पहले केवल direct children ही grid में भाग ले सकते थे, लेकिन subgrid का उपयोग करने पर <ul>·<li> जैसी nested structures में भी वही grid cell placement संभव हो जाती है
• यह content length के अंतर से पैदा होने वाले sibling elements के बीच असंतुलन को हल करता है और हर card या section के dynamically responsive लेआउट को support करता है
• हालांकि row reservation issues, line number reset, auto-fill आधारित fluid grid के साथ incompatibility जैसी बातों पर ध्यान देना ज़रूरी है
• प्रमुख browsers में इसका support उपलब्ध है, और progressive adoption संभव होने से यह आगे चलकर UI design flexibility को काफ़ी बढ़ाने वाली तकनीक है

---

Subgrid की बुनियादी अवधारणा

• शुरुआती CSS Grid में केवल direct child elements ही लेआउट में भाग ले सकते थे
  • उदाहरण के लिए, portfolio UI में <ul> के अंदर मौजूद <li> images मूल रूप से एक ही cell में बंध जाती हैं
• grid-template-rows: subgrid, grid-template-columns: subgrid का उपयोग करने पर parent grid की row·column definitions inherit की जा सकती हैं
  • हर <li> parent grid के cell में सीधे place हो सकता है, जिससे semantic HTML structure और visual alignment दोनों एक साथ बने रहते हैं
• वही नतीजा Flexbox और nested Grid से भी बनाया जा सकता है, लेकिन subgrid single grid structure sharing के कारण ज़्यादा संक्षिप्त तरीका देता है

नए लेआउट की संभावनाएँ

• portfolio card उदाहरण में हर <article> के पास 2-column grid होती है, जिसमें image और text रखे जाते हैं
  • fr unit flexible होती है, लेकिन हर card अलग से calculation करती है, जिससे column width imbalance पैदा होता है
• grid-template-columns: subgrid लागू करने पर parent grid के column ratios को सभी cards साझा करते हैं
  • title length जैसे content changes के अनुसार पूरी grid अपने-आप फिर से adjust हो जाती है
• इस तरीके से sibling elements के बीच mutually aware layout लागू किया जा सकता है
  • उदाहरण: “Infinite Supercomputer” title को छोटा करने पर सभी cards का image·text ratio तुरंत adjust हो जाता है

Subgrid इस्तेमाल करते समय ध्यान देने योग्य बातें (Gotchas)

row space reservation

• column sharing सहज लगती है, लेकिन rows share करने पर explicit row reservation की ज़रूरत होती है
  • उदाहरण: pricing table cards में हर <ul> की items को एक ही row में align करने के लिए grid-row: span N से row count specify करना पड़ता है
• subgrid default रूप से सिर्फ एक cell घेरती है, इसलिए कई rows का उपयोग करने के लिए पहले parent grid area को expand करना ज़रूरी है

nested grid numbering

• subgrid parent की row·column templates inherit करती है, लेकिन line numbers reset हो जाते हैं
  • उदाहरण: parent की 2~5 lines inherit होने पर भी अंदर वे 1~4 के रूप में फिर से नंबर पाती हैं
  • हर grid का अपना index होता है, इसलिए line numbers unique ID नहीं बल्कि relative index की तरह काम करते हैं

fluid grid के साथ incompatibility

• repeat(auto-fill, minmax()) रूप वाली fluid grid को subgrid के साथ इस्तेमाल नहीं किया जा सकता
  • subgrid को defined column count चाहिए, और auto-fill·auto-fit support नहीं होते
  • लेखक ने साफ़ कहा है कि उन्हें इस combination का कोई समाधान नहीं मिला

पुराने browsers का support

• 2023 के बाद से प्रमुख browsers में support है, लेकिन support rate 90% से कम है
• @supports not (grid-template-columns: subgrid) condition के जरिए alternative layout दी जा सकती है
  • उदाहरण: image और text को vertical stack में रखने वाला fallback structure सुझाया गया है

वास्तविक उदाहरण और निष्कर्ष

• Stripe developer site (stripe.dev) पूरे page को एक बड़े grid के रूप में बनाती है और कई subgrid layers के ज़रिए बारीक placement लागू करती है
• subgrid केवल बड़े लेआउट ही नहीं, छोटे UI adjustments में भी उपयोगी है
• पूरे project को फिर से बनाए बिना progressively adopt किया जा सकता है
• CSS layout में नई flexibility हासिल करने का साधन होने के कारण, प्रयोगात्मक उपयोग के लिहाज़ से इसका मूल्य काफ़ी ऊँचा है

[GN⁺]

Hacker News राय

• Subgrid फीचर वाकई शानदार है, लेकिन पहले आसान उदाहरण में ul { display: contents } का इस्तेमाल करके children को grid layout में हिस्सा लेने दिया जा सकता है
  अगर Subgrid फीचर ज़रूरी नहीं है, तो यह तरीका ज़्यादा efficient है

  • उस उदाहरण में सही है, लेकिन आम तौर पर display: contents UL element को layout से पूरी तरह हटा देता है
    इसलिए उस element पर style लागू नहीं किया जा सकता या उससे UI events नहीं लिए जा सकते
    अगर आप UL को highlight area या scroll होने वाले section की तरह इस्तेमाल करना चाहते हैं, तो subgrid कहीं ज़्यादा उपयोगी है
  • दूसरे उदाहरण में, image की width एक जैसी रखनी हो तो fr की जगह कोई दूसरी unit इस्तेमाल करें, और text के लिए fr रखें ताकि वह बची हुई जगह भर ले

• पहले जब price comparison UI बना रहा था, तब subgrid न होने की वजह से बहुत परेशानी हुई थी
  दो tables को साथ-साथ रखकर उनकी rows को align करना असंभव था
  fixed height या JS calculation से इसे संभाला जा सकता था, लेकिन React component structure में यह बहुत inefficient था

• मुझे लगा था कि Container queries शायद बेहतर समाधान होंगी
  लेकिन पूरे grid की consistency बनाए रखने के लिए subgrid ज़्यादा उपयुक्त हो सकता है
  वैसे CodePen example देखें तो समझना आसान है

  • Container queries sibling elements के size पर react करने की समस्या हल नहीं करतीं
    ऊपर से container इस्तेमाल करने पर नया stacking context बन जाता है, जो असुविधाजनक है
    subgrid और container को साथ में इस्तेमाल न कर पाना अफसोस की बात है। अगर child subgrid size को refer कर पाते, तो यह सच में बहुत powerful होता

• यह सोच आता है, “क्या हम आखिरकार फिर से <table> layout पर लौट आए हैं?”

  • हाँ भी और नहीं भी। पुराने <table> समस्या हल करने के लिए एक hack थे, लेकिन उनमें accessibility और तकनीकी सीमाएँ बहुत थीं
    Grid system visual arrangement का tool है, data structure दिखाने वाली table से अलग
    अब जब grid standard बन चुका है, तो काश इसकी table से तुलना बंद हो जाए
  • 25 साल पहले server से tables अपने-आप render करवाकर layout बनाया जाता था, और तब यह सच में आसानी से काम करता था
    लेकिन responsive design या accessibility का बिल्कुल ध्यान नहीं रखा जाता था। आख़िर में हमने tables को फिर से ईजाद ही किया है
  • <table> की समस्या यह थी कि वह content को describe करने वाली structure थी। **Grid अपने-आप में समस्या नहीं है**
  • मैं भी 20 साल से ज़्यादा समय से यह सुनता आया हूँ कि “tables tabular data के लिए हैं”
    आखिरकार CSS ने उसी capability को बेहतर रूप में फिर से लागू किया है

• पहले जो grid bug झेला था, उनमें से एक यह था कि <img> element का size percentage में देने पर cell size original image size की वजह से बिगड़ जाता था
  यह Firefox और Chromium, दोनों में होता था, और संबंधित bug Mozilla Bug 1857365 में है

  • सोच रहा हूँ कि image पर fixed width/height attributes देने से क्या यह समस्या खत्म हो जाती है

• अफसोस होता है कि layout के लिए CSS को कई बार document structure की जानकारी अतिरिक्त रूप से देनी पड़ती है
  जैसे rows की संख्या अलग से बतानी पड़ती है

  • आदर्श रूप से ऐसा तरीका होना चाहिए जिससे parent अलग होने पर भी elements को align किया जा सके
    या फिर एक flex container दूसरे container की distribution को mimic कर सके, तो अच्छा होगा
    लेकिन ऐसा करने पर DX जटिल हो जाने की संभावना ज़्यादा है

• मैं सोच रहा था कि code examples में HTML और CSS, दोनों files में styles क्यों हैं
  पहले subgrid example का सिर्फ CSS देखकर मैं काफ़ी देर तक यही ढूँढता रहा कि UL पर कौन-सा style लागू हुआ है

• यह सोच आता है, “क्या हम आखिरकार फिर से grid पर लौट आए हैं?”
  पुराने HTML दौर में भी हम कुछ ऐसा ही करते थे

  • लेकिन आज का grid responsive design को बहुत आसान बना देता है
  • हाँ, अब styling करते समय bugs भी ज़्यादा हो जाते हैं 😅

• Josh के blog posts हमेशा प्रभावित करते हैं
  लिखने की स्पष्टता, design sense, और interactive website—सब शानदार है

  • मैं भी उसकी mailing list का subscriber हूँ। हर नई post का इंतज़ार रहता है

• निजी तौर पर मुझे अब भी grid के साथ काम करना असहज लगता है
  इसका syntax अटपटा लगता है और layout की समझ भी ठीक से नहीं बैठती। Flexbox कहीं ज़्यादा intuitive और flexible है

  • दोनों तकनीकें समस्याओं को अलग तरह से approach करती हैं
    Flexbox content-केंद्रित है, जबकि Grid size को container-केंद्रित तरीके से control करता है
  • मैं भी कभी-कभी grid को फिर से आज़माता हूँ, लेकिन अब भी इसमें मनचाही functionality की कमी लगती है
    content कई axes पर अपने-आप align नहीं होता, और सब कुछ manually place करना पड़ता है
    शायद मैं अभी तक grid की असली प्रकृति ठीक से नहीं समझ पाया, या फिर यह मेरे काम के प्रकार के लिए सही नहीं है
  • responsive design बनाते समय भी flexbox, grid से कहीं ज़्यादा सरल लगता है