सीएसएस सबग्रिड न्यूज़

कुछ हफ्ते पहले, मैंने न्यूकैसल में फ्रंटेंड एनई पर बात की थी और सबसे अधिक भाग के लिए समझाया था कि ग्रिड स्तर से सीएसएस ग्रिड सबग्रिड में क्या विशेषताएं होंगी। इस संपत्ति का कोई कार्यान्वयन नहीं होना (ब्राउज़रों में), मैंने DevTools के लिए डेमो का एक गुच्छा बनाया, इसके लिए प्रदर्शन।

स्मैशिंग कॉन्फ पर सैन फ्रांसिस्को के रास्ते में, जहां मैंने एक सीएसएस लेआउट कार्यशाला का आयोजन किया, मुझे फ़ायरफ़ॉक्स नाइटली ट्रायल बिल्ड का एक्सेस दिया गया, जिसमें इस संपत्ति का शुरुआती कार्यान्वयन था।
इसका मतलब है कि मुझे मई में अपने प्रदर्शन के लिए कुछ स्लाइड्स को फिर से करना होगा, वहां वास्तविक स्क्रीनशॉट का उपयोग किया जाएगा।

मैंने ट्विटर पर कुछ स्क्रीनशॉट पोस्ट किए हैं और मैं अपने सभी उदाहरणों को ग्रिड द्वारा उदाहरण में पोस्ट करूंगा, जैसे ही सीएसएस ग्रिड सबग्रिड संपत्ति मुख्य फ़ायरफ़ॉक्स निग्ली असेंबली में ध्वज के साथ काम करती है। हालांकि, हर किसी के लिए जो सप्ताहांत में ट्विटर को देखने की तुलना में अधिक महत्वपूर्ण चीजें हैं, यहां कुछ स्क्रीनशॉट हैं। उनमें My CodePen उदाहरणों के लिंक हैं ताकि आप सबग्रिड तत्वों (सबग्रिड) के लिए कोड देख सकें। मैंने फ़ायरफ़ॉक्स DevTools में ग्रिड (ग्रिड) और सबग्रिड (सबग्रिड) पर प्रकाश डाला, जिससे आपको यह देखने में मदद मिल सके कि आपको क्या देखना है।

कॉलम और पंक्तियों के लिए ग्रिड

इस मामले में, सबग्रिड मूल तत्व के कॉलम और पंक्तियों में है। इसका मतलब यह है कि सबग्रिड क्षेत्र में कोई छिपा हुआ ग्रिड नहीं है, क्योंकि दोनों आकार माता-पिता की उपलब्ध पटरियों से बंधे हैं।

कोडपेन - कॉलम और रो के लिए ग्रिड

स्तंभ केवल जाल

इस मामले में, मैंने कॉलम के लिए एक सबग्रिड का उपयोग किया। इसका मतलब यह है कि मैं तत्वों के लिए आवश्यकतानुसार कई लाइनों को जोड़ने के लिए अंतर्निहित जाली पटरियों का उपयोग कर सकता हूं। पंक्तियाँ बिना किसी सबनेट के नेस्टेड ग्रिड के रूप में अपने आकार का उपयोग करती हैं।

कोडपेन - कॉलम केवल ग्रिड

केवल सबनेट

इस मामले में, मैंने पंक्तियों को उप-ग्रिड बना दिया और स्तंभों को परिभाषित किया, जैसे कि सामान्य इकाइयों में।
जैसा कि आप देख सकते हैं, कॉलम पथ माता-पिता से मेल नहीं खाते, क्योंकि वे अपनी ग्रिड परिभाषा का उपयोग करते हैं।

कोडपेन - केवल स्ट्रिंग्स के लिए सबग्रिड

मैं सीएसएस ग्रिड सबग्रिड के विकास में प्रगति को देखकर बहुत खुश हूं, साथ ही साथ अपने सेमिनारों और रिपोर्टों में इसके बारे में बात करने का अवसर मिला।

सबग्रिड के बारे में अधिक जानकारी इन लिंक पर देखी जा सकती है:

• स्लाइड्स और संसाधन फ्रंटएंड एनई से
• सीएसएस ग्रिड स्तर 2: यहाँ सबग्रिड आता है
• फ़ायरफ़ॉक्स: सबग्रिड के लिए ग्रिड लेआउट लागू करें
• क्रोम: सबग्रिड लागू करें
• ग्रिड स्तर 2 विनिर्देश