सीएसएस का सबग्रिड

पब्लिश होने की तारीख: 28 सितंबर, 2023

सीएसएस ग्रिड एक बहुत ही बेहतरीन लेआउट इंजन है. हालांकि, पैरंट ग्रिड पर बनाए गए पंक्ति और कॉलम ट्रैक का इस्तेमाल, सिर्फ़ ग्रिड कंटेनर के डायरेक्ट चाइल्ड को पोज़िशन करने के लिए किया जा सकता है. लेखक ने जिन नाम वाले ग्रिड एरिया और लाइनों को तय किया था वे सीधे चाइल्ड एलिमेंट के अलावा किसी दूसरे एलिमेंट में नहीं दिख रही थीं. subgrid की मदद से, ट्रैक का साइज़, टेंप्लेट, और नाम, नेस्ट किए गए ग्रिड के साथ शेयर किए जा सकते हैं. इस लेख में बताया गया है कि यह सुविधा कैसे काम करती है.

सबग्रिड की सुविधा आने से पहले, कॉन्टेंट को अक्सर मैन्युअल तरीके से तैयार किया जाता था, ताकि इस तरह के अनियमित लेआउट से बचा जा सके.

सबग्रिड के बाद, अलग-अलग साइज़ के कॉन्टेंट को अलाइन किया जा सकता है.

सबग्रिड के बारे में बुनियादी जानकारी

यहां सीएसएस subgrid के बुनियादी इस्तेमाल का एक आसान उदाहरण दिया गया है. ग्रिड को नाम वाले दो कॉलम के साथ तय किया जाता है. पहला कॉलम 20ch चौड़ा होता है और दूसरा कॉलम 1fr के स्पेस का "बाकी" हिस्सा होता है. कॉलम के नाम देना ज़रूरी नहीं है, लेकिन ये उदाहरण देने और शिक्षा देने के लिए बहुत अच्छे होते हैं.

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: [column-1] 20ch [column-2] 1fr;
}

इसके बाद, उस ग्रिड का चाइल्ड, उन दोनों कॉलम में फैल जाता है और ग्रिड कंटेनर के तौर पर सेट हो जाता है. साथ ही, grid-template-columns को subgrid पर सेट करके, अपने पैरंट के कॉलम को अपना लेता है.

.grid > .subgrid {
  grid-column: span 2;

  display: grid;
  grid-template-columns: subgrid; /* 20ch 1fr */
}

बस, पैरंट ग्रिड के कॉलम को एक लेवल नीचे सबग्रिड में भेज दिया गया है. यह सबग्रिड, अब उनमें से किसी भी कॉलम में चाइल्ड असाइन कर सकता है.

चैलेंज! वही डेमो दोहराएं, लेकिन grid-template-rows के लिए.

पेज लेवल का "मैक्रो" ग्रिड शेयर करना

डिज़ाइनर अक्सर शेयर किए गए ग्रिड के साथ काम करते हैं. वे पूरे डिज़ाइन पर लाइनें खींचते हैं और अपनी पसंद के किसी भी एलिमेंट को अलाइन करते हैं. अब वेब डेवलपर भी ऐसा कर सकते हैं! अब यह वर्कफ़्लो और भी कई तरीकों से किया जा सकता है.

डिज़ाइनर ग्रिड के सबसे सामान्य वर्कफ़्लो को लागू करने से, subgrid की सुविधाओं, वर्कफ़्लो, और संभावितताओं के बारे में बेहतर जानकारी मिल सकती है.

यहां मोबाइल पेज लेआउट के मैक्रो ग्रिड का Chrome DevTools से लिया गया स्क्रीनशॉट दिया गया है. लाइनों के नाम होते हैं और कॉम्पोनेंट को प्लेस करने के लिए साफ़ जगह होती है.

यहां दी गई सीएसएस, डिवाइस के लेआउट के लिए नाम वाली पंक्तियों और कॉलम के साथ यह ग्रिड बनाती है. हर लाइन और कॉलम का साइज़ होता है.

.device {
    display: grid;
    grid-template-rows:
      [system-status] 3.5rem
      [primary-nav] 3rem
      [primary-header] 4rem
      [main] auto
      [footer] 4rem
      [system-gestures] 2rem
    ;
    grid-template-columns: [fullbleed-start] 1rem [main-start] auto [main-end] 1rem [fullbleed-end];
}

कुछ अन्य स्टाइल से यह डिज़ाइन मिलता है.

इस पैरंट में, नेस्ट किए गए कई एलिमेंट हैं. डिज़ाइन में नेविगेशन और हेडर लाइनों के नीचे, पूरी चौड़ाई वाली इमेज होनी चाहिए. सबसे बाईं और दाईं ओर मौजूद कॉलम के नाम fullbleed-start और fullbleed-end हैं. ग्रिड लाइनों को इस तरह से नाम देने पर, बच्चे fullbleed के प्लेसमेंट के शॉर्टहैंड के साथ, एक साथ हर लाइनों को अलाइन कर सकते हैं. यह बहुत आसान है, जैसा कि आपको जल्द ही पता चलेगा.

डिवाइस के पूरे लेआउट में, अच्छी तरह से नाम वाली पंक्तियों और कॉलम का इस्तेमाल किया गया है. इन पंक्तियों और कॉलम को नेस्ट किए गए ग्रिड लेआउट में पास करने के लिए, subgrid का इस्तेमाल करें. यह subgrid खास पल है. डिवाइस लेआउट, नाम वाली पंक्तियों और कॉलम को ऐप्लिकेशन कंटेनर में भेजता है. इसके बाद, कंटेनर उन्हें अपने सभी चाइल्ड लेआउट में भेजता है.

.device > .app,
.app > * {
    display: grid;
    grid: subgrid / subgrid;

    /* same as */
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
}

सीएसएस सबग्रिड, ग्रिड ट्रैक की सूची के बजाय इस्तेमाल की जाने वाली वैल्यू है. पैरंट एलिमेंट से, एलिमेंट जिन पंक्तियों और कॉलम में फैला है वे अब वही पंक्तियां और कॉलम हैं जो एलिमेंट में मौजूद हैं. इससे .device ग्रिड की लाइन के नाम, सिर्फ़ .app के बजाय .app के बच्चों के लिए भी उपलब्ध हो जाते हैं. .app में मौजूद एलिमेंट, सब-ग्रिड से पहले .device से बनाए गए ग्रिड ट्रैक का रेफ़रंस नहीं दे पा रहे थे.

इन सभी चीज़ों को तय करने के बाद, subgrid की मदद से नेस्ट की गई इमेज अब लेआउट में फ़ुल ब्लीड हो सकती है. इसमें कोई नेगेटिव वैल्यू या ट्रिक नहीं है. इसके बजाय, एक लाइन में यह जानकारी दी गई है कि “मेरा लेआउट fullbleed-start से fullbleed-end तक है.”

.app > main img {
    grid-area: fullbleed;
}

यहां आपको एक ऐसा मैक्रो ग्रिड दिख रहा है जिसका इस्तेमाल डिज़ाइनर करते हैं. इसे सीएसएस में लागू किया गया है. ज़रूरत के मुताबिक, इस कॉन्सेप्ट को बढ़ाया और बेहतर बनाया जा सकता है.

सहायता देखें

सीएसएस और सबग्रिड की मदद से, प्रगतिशील बेहतर बनाने की सुविधा का इस्तेमाल करना आसान और जाना-पहचाना है. @supports का इस्तेमाल करें और ब्रैकेट के अंदर ब्राउज़र से पूछें कि क्या वह टेंप्लेट कॉलम या लाइनों की वैल्यू के तौर पर सबग्रिड को समझता है. इस उदाहरण में यह जांच की जाती है कि grid-template-columns प्रॉपर्टी में subgrid कीवर्ड का इस्तेमाल किया जा सकता है या नहीं. अगर ऐसा है, तो इसका मतलब है कि सबग्रिड का इस्तेमाल किया जा सकता है

@supports (grid-template-columns: subgrid) {
  /* safe to enhance to */
}

DevTools

Chrome, Edge, Firefox, और Safari में बेहतरीन सीएसएस ग्रिड डेवलपर टूल हैं. साथ ही, Chrome, Edge, और Firefox में सबग्रिड से जुड़ी मदद करने के लिए खास टूल हैं. Chrome ने अपने टूल का एलान 115 में किया था, जबकि Firefox में ये टूल एक साल या उससे ज़्यादा समय से मौजूद हैं.

सबग्रिड बैज, ग्रिड बैज की तरह ही काम करता है. हालांकि, इससे यह पता चलता है कि कौनसी ग्रिड सबग्रिड हैं और कौनसी नहीं.

संसाधन

इस सूची में, सबग्रिड के बारे में लेख, डेमो, और शुरू करने के लिए प्रेरणा देने वाली जानकारी शामिल है. अगर आपको सबग्रिड के बारे में ज़्यादा जानना है, तो इन सभी संसाधनों को एक्सप्लोर करें!

• MDN
• अलाइन किए गए कैप्शन के साथ रेचल एंड्रयू
• रेचल एंड्रयू के 10 बेहतरीन उदाहरण
• उदाहरणों वाली साइट के साथ रेचल एंड्रयू
• अहमद सदीद का लेख
• सीएसएस डे 2022 में माइशे बारकर
• कार्ड
  • Jhey का Codepen
  • Codepen by Ahmad Shadeed
  • Takeshi Kano का Codepen
  • Arvid का Codepen
  • क्रिस कोयियर का Codepen
  • Codepen by Miriam Suzanne
• फ़ॉर्म के बारे में बताते हुए क्रिस कोयियर
• फ़ॉर्म अलाइनमेंट के साथ फ़ैकंडो कोरादिनी
• सूची के आइटम मार्कर को अलाइन करते हुए क्रिस कोयियर
• पैरंट ग्रिड के साथ अलाइन करने के लिए, मिशेल बार्कर को कंटेनर से बाहर पॉप आउट करते हुए दिखाने का तरीका
• नाम वाली लाइन के नाम और सबग्रिड इंटरैक्शन दिखाने वाली मिरियम सुज़ैन
• नाम वाले एरिया की बुनियादी बातें बताने वाले केविन पॉवेल
• अलाइन की गई सूचियों के साथ केविन पॉवेल
• अलाइन की गई सूचियों के साथ शैनन मइललेअर
• कॉम्पोनेंट में पास किए गए पेज लेवल ग्रिड के साथ केविन पॉवेल
• Elad Shechter with a devtool overlay and fallback
• अरेन इकर ने फ़ुटनोट के बेसलाइन अलाइनमेंट के लिए, सबग्रिड के टाइपोग्राफ़िक इस्तेमाल का अच्छा उदाहरण दिया है
• एडम आर्गाइल की फ़ुलब्लीड इमेज, जो किसी लेख में शामिल है