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

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

सबग्रिड से पहले, कॉन्टेंट को लोगों के हिसाब से बनाया जाता था, ताकि बड़े-बड़े लेआउट से बचा जा सके, जैसे कि यह वाला.

तीन कार्ड साथ-साथ दिखाए जाते हैं. हर कार्ड में कॉन्टेंट के तीन हिस्से होते हैं:
हेडर, पैराग्राफ़ और लिंक. हर टेक्स्ट की लंबाई अलग-अलग है. इसलिए, कुछ
कार्ड में, एक-दूसरे के बगल में बैठने पर अजीब सी चीज़ें दिखती हैं.

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

तीन कार्ड एक साथ दिखाए जाते हैं. हर कार्ड में तीन तरह का कॉन्टेंट होता है: हेडर, पैराग्राफ़, और लिंक. इनमें से हर टेक्स्ट की लंबाई अलग-अलग है. हालांकि, सबग्रिड ने अलाइनमेंट ठीक कर दिए हैं. इसके लिए, हर कॉन्टेंट आइटम में सबसे लंबे टेक्स्ट की मदद से पंक्ति की ऊंचाई सेट की गई है. इससे, अलाइनमेंट से जुड़ी सभी समस्याएं ठीक हो गई हैं.

ब्राउज़र सहायता

  • Chrome: 117.
  • एज: 117.
  • Firefox: 71.
  • सफ़ारी: 16.

सोर्स

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

यहां इस्तेमाल का एक उदाहरण दिया गया है. इसमें सीएसएस 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 */
}
CSS ग्रिड DevTools का स्क्रीनशॉट, जिसमें कॉलम लाइन की शुरुआत में नाम के साथ दो कॉलम एक साथ दिख रहे हैं.
https://codepen.io/web-dot-dev/pen/NWezjXv

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

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

पेज स्तरीय "मैक्रो" शेयर करें जीआरआईडी

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

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

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

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

Chrome CSS ग्रिड 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];
}

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

पहले जैसा ही CSS DevTools ग्रिड ओवरले, लेकिन इस बार इसमें मोबाइल सिस्टम के कुछ यूज़र इंटरफ़ेस (यूआई), कुछ शैडो, और थोड़ा रंग मौजूद है. यह जानने में मदद करता है कि
डिज़ाइन काम कर रहा है.

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

ऐप्लिकेशन
DevTools में ग्रिड ओवरले का स्क्रीनशॉट ज़ूम किया गया है. इसमें खास तौर पर
फ़ुलब्लेड-स्टार्ट और फ़ुलब्लेड-एंड कॉलम के नाम.

नाम वाली पंक्तियों और कॉलम से बनाए गए डिवाइस का लेआउट इस्तेमाल करने के लिए, अच्छी नाम वाली पंक्तियों और कॉलम को नेस्ट किए गए ग्रिड लेआउट में पास करने के लिए 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;
}
तैयार मैक्रो लेआउट, जिसमें एक पूरी चौड़ाई वाली नेस्ट की गई इमेज है, जो मुख्य नेविगेशन और हेडर पंक्तियों के ठीक नीचे मौजूद है और कॉलम की हर लाइन फ़ुलब्लेड तक फैली है.
https://codepen.io/web-dot-dev/pen/WNLyjzX

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

सहायता देखें

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

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

Devtools

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

एलिमेंट में मौजूद एलिमेंट पर मिले सबग्रिड बैज के स्क्रीनशॉट की झलक
पैनल.

सबग्रिड बैज, ग्रिड बैज की तरह काम करता है. हालांकि, यह विज़ुअल तौर पर, ग्रिड, सबग्रिड होते हैं, जबकि नहीं.

संसाधन

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