आधुनिक लेआउट के आधार के रूप में ग्रिड लेआउट

अंधेरे युग में, टाइपसेटर्स ने तालिकाओं पर साइटें बनाईं। फिर उन्होंने फ्लोट और फ्लेक्सबॉक्स में महारत हासिल की, और अंधेरा फिर से बढ़ गया। 2017 में, Enlightenment CSS ग्रिड लेआउट के आगमन के साथ शुरू हुआ।

ग्रिड क्षैतिज और ऊर्ध्वाधर स्थान को ध्यान में रखता है, इसके साथ आप लेआउट को छूने के बिना लेआउट को बदल सकते हैं, और यह सब मीडिया के प्रश्नों के बिना। ग्रिड के साथ, आप मैजिक नंबर, हैक, वर्कअराउंड और सीएसएस फ्रेमवर्क के बारे में भूल सकते हैं।



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

इस बारे में फ़्रंटेंड कॉन्फ पर सर्गेई पोपोव की रिपोर्ट का ट्रांसक्रिप्ट है: विनिर्देश के बारे में, कि लेआउट डिजाइनर ग्रिड से क्यों डरते हैं और अपनी परियोजनाओं में ग्रिड का उपयोग करने का निर्णय कैसे करें "अपनी वेबसाइट को फिर से महान बनाएं!"।


अध्यक्ष के बारे में : सर्गेई पोपोवसेरी , फ्रंट एंड डेवलपमेंट आउटसोर्सिंग के जनरल डायरेक्टर, लीग ए।, एचटीएमएल एकेडमी, फ्रंट-एंड डेवलपर, कम्युनिटी ऑर्गनाइज़र मॉस्कॉव्स, डब्लूएसडी के सह-आयोजक और पिटकेर्स_कॉन्फ़ । जब तक वह कंपनी में एक नेता नहीं बन गया, तब तक वह कई वर्षों तक टाइपसेटिंग में लगा रहा।

पिछले एक साल में, ग्रिड का उपयोग करने और उन्हें लिखने के बारे में कई पाठ्यक्रम और रिपोर्ट सामने आई हैं। यदि आप तकनीकी रिपोर्ट से थक गए हैं, तो मैं आपकी सूची में एक और जोड़ दूंगा। मजाक - चलो कॉमिक्स के बारे में बात करते हैं। या नहीं?

नोट : लंबे "सीएसएस ग्रिड लेआउट" के बजाय, बस "ग्रिड" होगा।

सीएसएस ग्रिड लेआउट के साथ क्या हो रहा है?

तकनीकी रूप से, ग्रिड एक सरल द्वि-आयामी ग्रिड है।


ग्रिड बनाना और उसका उपयोग करना काफी सरल है, लेकिन डेवलपर्स अभी भी इसे बदल रहे हैं। मुझे इसके दो कारण दिखाई देते हैं।

• कई लोग समझ नहीं पाते हैं कि ग्रिड के साथ क्या हो रहा है। इस उपकरण के बारे में बड़ी संख्या में मिथकों को समझना मुश्किल हो जाता है।
• हम, टाइपसेटर्स और फ्रंट-एंड विक्रेताओं के रूप में, यह नहीं समझते हैं कि रोजमर्रा के कार्यों में ग्रिड का उपयोग कैसे और कहां करना है।

पहले बिंदु से विश्लेषण शुरू करते हैं।

विनिर्देश

विनिर्देश का पहला संस्करण 2012 में जारी किया गया था, बहुत कुछ बदल गया, पत्राचार किया गया, और पांच साल बाद, इसे सक्रिय रूप से पेश किया जाने लगा। 2017 में, एक ही उछाल तब हुआ जब छह महीने तक ग्रिड, पहले प्रकाशित मसौदे की स्थिति से, इस निष्कर्ष पर पहुंचा कि क्रोम ने पहले इसे एक ध्वज के बिना लागू किया, और फिर अन्य सभी ब्राउज़र। इस तथ्य के कारण कि कार्यान्वयन जल्दी में था, विनिर्देश बंद नहीं हुआ और कुछ विवादास्पद मुद्दों को छोड़ना पड़ा, ताकि ब्राउज़रों को इंजन के आधे हिस्से को फिर से लिखना न पड़े।

विनिर्देश स्थिर है, हालांकि अभी भी उम्मीदवार अनुशंसा स्थिति में है। यदि मैं कर सकता था, तो मैं इसे बहुत पहले ही जारी कर सकता था, लेकिन विनिर्देश के डेवलपर्स जल्दी में नहीं हैं, लेकिन पूरक और शब्दांकन को बदलते हैं।

आइए गैर-अनुशंसित ग्रिड लेआउट विनिर्देश लागू करें - यह एक विरोधाभास नहीं है, क्योंकि ग्रिड को पहले लागू किया गया था और फिर वर्णित किया गया था।

दूसरा गलत कथन यह है कि ग्रिड का दूसरे स्तर के बिना कोई मतलब नहीं है।

दूसरे स्तर के विनिर्देश

जब उन्होंने विनिर्देश लिखा, तो यह बहुत बड़ा हो गया, इसलिए कुछ हिस्सा दूसरे स्तर पर आवंटित किया गया। 2018 के लिए, फर्स्ट पब्लिक वर्किंग ड्राफ्ट के राज्य में दूसरे स्तर का विनिर्देश कार्य प्रारूप का पहला प्रकाशन है।

विनिर्देशन पर सक्रिय रूप से काम किया जा रहा है और निकट भविष्य में यह वर्किंग ड्राफ्ट राज्य में जाएगा - एक कामकाजी मसौदा। डेवलपर्स ग्रिड के जारी होने की प्रतीक्षा कर रहे हैं, लेकिन यह एक लंबी प्रक्रिया है जो 5 साल तक खींच सकती है।

किंवदंती के अनुसार, दूसरे स्तर के विनिर्देश पहले स्तर की समस्याओं को हल करते हैं। वास्तव में, यह उन विशेषताओं को जोड़ता है जो आप बिना कर सकते हैं, और कुछ भी आपको दूसरे के बिना पहले स्तर का उपयोग करने से रोकता है।

प्रदर्शन: सबग्रिड;

इससे पहले कि हम जानते हैं कि ग्रिड क्या था, कैसे सबग्रिड दिखाई दिया। आइए जानें कि यह क्या है।

इस मार्कअप की कल्पना करें।



सब कुछ काफी सरल है: हमारे पास एक ग्रिड है, तीन गैर-अर्थ और एक अर्थ तत्व इसमें अंतर्निहित हैं। ग्रिड फ्लेक्सबॉक्स की तरह काम करता है: जब आप display: grid; उपयोग display: grid; एक आवरण के लिए, यह घोंसले के पहले स्तर पर केवल तत्वों पर लागू होता है।



उदाहरण के लिए 1, 2 और 3 <div> ग्रिड में जगह लेगा, और सूची के अंदर जो कुछ भी है वह ढह जाएगा। आप इन सभी तत्वों को खो देंगे क्योंकि यह ग्रिड कैसे काम करता है।

यदि आप चाहते हैं कि ये तत्व आपके ग्रिड का हिस्सा बने रहें, तो दो विकल्प हैं:

• पहला विकल्प रैपर से छुटकारा पाने का है । <ul> हटाएं और <li> को <div> बदलें। हम शब्दार्थ को मारते हैं, लेकिन ग्रिड को छोड़ देते हैं।

• दूसरा विकल्प display: subgrid; का उपयोग करना display: subgrid; ।

यदि आप display: subgrid; लागू display: subgrid; सूची में, <li> तत्व इस ग्रिड का हिस्सा बन जाएंगे, <ul> , एक आवरण की तरह, नजरअंदाज कर दिया जाएगा। आपको एक पूर्ण ग्रिड मिलेगा और पूर्ण शब्दार्थ रहेगा - HTML दोनों अच्छा है और CSS अच्छा है।

एक समस्या यह है कि सबग्रिड समर्थित नहीं है , यह झंडे के पीछे कहीं है, और रिलीज लंबे समय तक होने की उम्मीद की जा सकती है।

प्रदर्शन: सामग्री;

सामान्य तौर पर, प्रतीक्षा करना आवश्यक नहीं है , क्योंकि display: contents; - एक अद्भुत संपत्ति जो display: subgrid; के समान काम करती है display: subgrid; । यदि सूची के तत्वों के लिए display: contents; लागू display: contents; , फिर <li> तत्व ग्रिड का हिस्सा बन जाएंगे।

एक अति सूक्ष्म अंतर है - display: contents; सभी ब्राउज़रों में समर्थित नहीं है।

सीएसएस सबग्रिड एमुलेशन

display: contents; करते समय display: contents; समर्थन समस्या को हल करें, लेआउट डिजाइनर एक तरह से बाहर आए - उन्होंने एक सबग्रिड एमुलेशन बनाया।

स्लाइड में पाशा लोवत्सेविच का उदाहरण दिया गया है ।



उपरोक्त उदाहरण में, एक सबग्रिड व्यवहार है, लेकिन इसका व्यवहार display: subgrid; माध्यम से अनुकरण नहीं किया गया है display: subgrid; या display: contents; , और कस्टम अभिव्यक्तियों के कारण, जिन्हें चर में परिवर्तित किया जाता है।

सीएसएस में हाइफ़नेटेड गुण कस्टम गुण हैं।

दूसरे स्तर की जरूरत नहीं है

यदि कोई आपसे कहता है कि जब तक दूसरा स्तर नहीं निकलता है, तब तक ग्रिड का उपयोग न करें। दूसरा स्तर कुछ समस्याओं को हल करता है जो पहले से ही अन्य तरीकों से हल हो जाती हैं।

हर जगह आपको एक सबग्रिड की जरूरत नहीं है। फ्लेक्सबॉक्स के साथ संयोजन में ग्रिड कभी-कभी सबग्रिड की तुलना में बहुत ठंडा होता है।

इसलिए, दूसरे स्तर की प्रतीक्षा न करें, पहला करने के लिए स्वतंत्र महसूस करें। इसके अलावा, वह पहले से ही है।

ब्राउज़र में ग्रिड का समर्थन

यह चित्र दिखाया जा सकता है यदि कोई आपको बताता है कि ग्रिड समर्थित नहीं है।



ओपेरा मिनी को छोड़कर दुनिया भर में 87% ब्राउज़रों ने समर्थन किया - यह कुछ भी समर्थन नहीं करता है। मैंने कैनियस को लिखा , इसे कॉलम से हटाने के लिए कहा, ताकि तस्वीर को खराब न करें, लेकिन अभी तक कोई फायदा नहीं हुआ;)

यदि आप @supports जोड़ते हैं, तो सब कुछ काम करता है, यहां तक ​​कि ओपेरा मिनी भी। मुझे पता नहीं है कि ओपेरा मिनी फ्लेक्सबॉक्स का समर्थन करता है, लेकिन वहां आप कमबैक कर सकते हैं।

IE के साथ कोई समस्या है। हमेशा की तरह, वह हमारे साथ यहां है और कहीं नहीं गया है।

IE और ग्रिड

यदि आपका आवेदन IE का समर्थन करता है, तो आप कह सकते हैं कि आप ग्रिड का उपयोग नहीं कर सकते। ऐसा नहीं है - ग्रिड IE में काम करता है , क्योंकि विनिर्देश Microsoft में पैदा हुआ था, और पहली बार IE में दिखाई दिया। सामान्य लोगों के आने और विनिर्देश को फिर से लिखने तक किसी ने भी इसका उपयोग नहीं किया।

IE ग्रिड को संभाल रहा है, लेकिन यह कैसे करना है यह समझाने की जरूरत है। IE विनिर्देश के पुराने संस्करण में ग्रिड का समर्थन करता है , जिसमें सभी गुणों का समर्थन नहीं किया जाता है, लेकिन भाग को अलग तरीके से कहा जाता है।

आपको IE के लिए संस्करण विनिर्देश सीखने की आवश्यकता नहीं है, क्योंकि आपके लिए अधिकांश काम ऑटोप्रिफ़र द्वारा किया जाएगा, एक प्लगइन जो विनिर्देश के नए संस्करण को पुराने एक पर ले जाता है। इसलिए, IE में ग्रिड सहायता प्रदान करने के लिए, ऑटोप्रिफ़िशर का उपयोग करना पर्याप्त है।

बाकी आपको सिर्फ जानने और याद रखने की जरूरत है। बस "इंटरनेट एक्सप्लोरर में सीएसएस ग्रिड का समर्थन" लेख खोलें, पढ़ें कि कौन से गुण IE में समर्थित हैं और कौन से नहीं हैं, और तय करें कि आप किसका उपयोग करेंगे।

"सुशोभित गिरावट" याद रखें जब नए से तत्व ब्राउज़र के पुराने संस्करणों में गायब हो जाते हैं। उदाहरण के लिए, उन ब्राउज़र में जो बॉर्डर-त्रिज्या का समर्थन नहीं करते हैं, आकृतियों में वर्ग कोने होंगे। लेआउट डिजाइनरों को सीएसएस के बजाय फॉर्म चित्रों को काटने के लिए मजबूर किया गया था, और कुछ स्थितियों में यह सामान्य माना जाता था।

ब्राउज़रों के पुराने संस्करणों में ग्रिड को नियमित कॉलम में क्यों न बदलें? यदि आप एक पुराने ब्राउज़र के लिए विकसित कर रहे हैं, तो या तो आधुनिक तकनीकों का उपयोग न करें, या इस तथ्य के साथ डालें कि उनमें सामग्री अलग दिखेगी।

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

बग्स और ग्रिड

आप कह सकते हैं कि ग्रिड में बहुत सारे कीड़े हैं, लेकिन यह नहीं है। राहेल एंड्रयू को सीएसएस ग्रिड में सभी त्रुटियां मिलीं - कुल मिलाकर 14 हैं , और यह सब वहाँ है। कोई भी रैचेल से अधिक ग्रिड लेआउट सीएसएस नहीं करता है, इसलिए आप उस पर भरोसा कर सकते हैं।

कीड़े काफी विशिष्ट हैं। हमें याद है कि जब फ्लेक्सबॉक्स आया था, तो उनके पास कीड़े भी थे, लेकिन यह हमें रोक नहीं पाया। ग्रिड में कीड़े भी हमें रोकते नहीं हैं, खासकर ऐसे।


"कुछ HTML तत्व ग्रिड कंटेनर नहीं हो सकते हैं।" अभी एक स्पष्टीकरण है कि बटन ग्रिड कंटेनर नहीं हो सकता है, लेकिन हम यह नहीं चाहते हैं ।


"Textarea, जब यह ग्रिड का एक तत्व होता है, तो ढह जाता है।" यदि आप प्रतिशत में चौड़ाई और ऊंचाई डालते हैं तो समस्या आसानी से हल हो जाती है।

ये बग काफी विशिष्ट हैं और सभी ब्राउज़रों में दिखाई नहीं देते हैं। यदि आप जानते हैं कि एक बग हो सकता है, तो आप बस इसे ले लें और इसे ठीक करें - यह आसान है।

ग्रिड का उपयोग नहीं करने के कई तकनीकी कारण नहीं हैं। ब्राउज़र समर्थन करते हैं, और पुराने ब्राउज़रों में "सुशोभित गिरावट" का उपयोग किया जाता है। सैद्धांतिक कारण भी कम हैं, क्योंकि फ्लेक्सबॉक्स की तुलना में अधिक सामग्री हैं।

सिद्धांत, या एक छोटा शैक्षिक कार्यक्रम

• CSS- ट्रिक्स द्वारा स्क्वीज़िंग स्पेक्स - "ग्रिड के लिए एक पूर्ण गाइड", फ्लेक्सबॉक्स की तरह ही अच्छा है।
• उदाहरण के लिए, सीएसएस ग्रिड कोर्स या वीडियो पाठ्यक्रम जानें , वेस बोस से , मोजिला द्वारा दर्ज और प्रायोजित।
• Gridbvexample.com पर पूर्ण विसर्जन: साइट स्वयं ग्रिड में लिखी गई है, सभी विशिष्टताओं, उदाहरणों, कोड स्निपेट्स पर जानकारी है।
• गाजर के साथ खेल - पूर्ण सरलीकरण, यहां तक ​​कि बच्चे इसे समझेंगे।
• इंटरएक्टिव HTML अकादमी पाठ्यक्रम । अकादमी ने ग्रिड को सीखने की प्रक्रिया में पेश किया।

ग्रिड यहाँ है! हम लंबे समय तक कह सकते हैं कि हम ग्रिड का उपयोग क्यों नहीं करते हैं, लेकिन जब आप लेख पढ़ रहे होते हैं, तो ग्रिड पहले से ही उत्पादन में तैनात होता है।

साइटें पहले से ही ग्रिड का उपयोग करती हैं। उदाहरण के लिए, मैं रूसी इंटरनेट वीक वेबसाइट पर गया, और यह आखिरी जगह है जहां मुझे ग्रिड देखने की उम्मीद थी। आमतौर पर, व्यापारिक सम्मेलन स्थल तिल्दा पर एकत्रित होते हैं।



इसके अलावा, वे कम या ज्यादा सही ढंग से ग्रिड का उपयोग करते हैं। आरआईडब्ल्यू ने कोशिश की, और उन्होंने इसे किया, और बिना कमियां के। वे आधुनिक ब्राउज़रों के उपयोगकर्ताओं को स्पष्ट रूप से लक्षित करते हैं।



सीएसएस के बारे में बात करने वाले सम्मेलन, किसी भी मामले में, नए टूल का उपयोग करने का प्रयास करते हैं। हमने साइट पिटर्केस_कॉन्फ़ पर बैज बनाए, और मिन्स्क के लोगों की ग्रिड पर आधी साइट है।

रूसी इंटरनेट सप्ताह आगंतुकों का एक बल्कि संकीर्ण दर्शकों है। न्यूयॉर्क टाइम्स में अधिक लोग पढ़ते हैं।



मुझे यकीन है कि पाठकों के बीच IE 9, 10, 11 के साथ भी उपकरणों के मालिक हैं, लेकिन साइट का आधा हिस्सा ग्रिड पर है।

मुझे आश्चर्य हुआ जब मैंने देखा कि इतनी बड़ी परियोजनाएं ग्रिड का उपयोग करती हैं।

हर जगह ग्रिड का उपयोग क्यों नहीं किया जाता है?

हमें एहसास हुआ कि एक विनिर्देश है, इसका उपयोग किया जा सकता है और कोई भी बहाना काम नहीं करेगा। तो सौदा क्या है?

मेष का उपयोग न करने के कुछ कारण हैं:

• डिज़ाइनर लेआउट डिज़ाइनर के लिए अघुलनशील कार्य नहीं करते हैं।
• लेआउट डिजाइनर समझ नहीं पाते हैं कि ग्रिड को वास्तविक परियोजनाओं पर कैसे लागू किया जाए। सबसे अधिक संभावना है, आपके डिजाइनर ने एक जटिल ग्रिड नहीं बनाया था, और आपको समझ नहीं आता कि लेआउट में ग्रिड कैसे संलग्न करें।

डिजाइन के संदर्भ में

अब मैं डिजाइनरों की रक्षा करूंगा।

वेब प्रौद्योगिकियों के विकास से संबंधित नहीं, इसके रुझानों के अनुसार, डिजाइन धीरे-धीरे विकसित हो रहा है। इसके विपरीत - वेब प्रौद्योगिकीविदों को डिजाइन रुझानों के अनुकूल होना चाहिए। यह संभावना नहीं है कि कोडर कहेंगे: "डिजाइनर, और हमारे पास एक ग्रिड है, आप इसके साथ काम कर सकते हैं," और वे कहेंगे, "ओह, हाँ!" और उनके लिए लेआउट बनाना शुरू किया।

इसलिए, अधिकांश साइटें इस तरह दिखती हैं।



एक साधारण ग्रिड और स्तंभों के साथ एक सार उदाहरण, कुछ भी असामान्य नहीं है। फ्लेक्सबॉक्स के बिना साइट बनाना आसान है, फ्लोट पर, आप टेबल लेआउट के साथ भी प्राप्त कर सकते हैं।

डिज़ाइनर लेआउट डिज़ाइनरों के लिए जटिल कार्य करना बंद कर देते हैं, क्योंकि एक बार जब हम स्वयं उन्हें इस तथ्य से एक कोने में ले जाते हैं कि हमने जो करना चाहते हैं, उन्हें करना बंद कर दिया है।

डिजाइनर हमारे पास आता है और कहता है:

- मुझे एक जटिल ग्रिड चाहिए!
- मैं नहीं कर सकता वह जटिल है ।
- नहीं, कर लो ।
- मैं नहीं कर सकता!

फिर हम प्रबंधक के पास जाते हैं, शिकायत करते हैं, और डिजाइनर सिर पर मारा जाता है।

यही है, डिजाइनर अब जटिल ग्रिड नहीं खींचता है। पहले, हम वास्तव में जटिल इंटरफेस नहीं बना सकते थे, लेकिन अब हम कर सकते हैं - हमारे पास बहुत सारे उपकरण हैं। अब डिजाइनर नहीं चाहता है, उसने जटिल लेआउट के लिए पूछना बंद कर दिया। डिजाइनर एक इंटरफ़ेस खींचता है ताकि लेआउट डिजाइनर इसे लागू कर सके, और अक्सर संभव के रूप में आदिम रूप से।

ब्लॉग

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



टाइपसेट लेआउट को देखता है, एक आवरण, दूसरा, फ्लेक्सबॉक्स पर एक तीसरा, और इस तरह की तस्वीर प्राप्त करता है।



लेआउट बैकएंड पर जाता है। बैकेंडर लेआउट डिजाइनर को बताता है कि उसके पास डेटाबेस से एक निष्कर्ष है, और कार्ड एक के बाद एक जाते हैं, उनका विस्तार नहीं किया जा सकता है।

यह खुश कहानी को समाप्त करता है और हम डिजाइनर के पास लौटते हैं।

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

विभिन्न निकास विकल्प हैं:

• डिजाइनर को दूर कोने में भेजा जाता है और वे कहते हैं: "हमारे पास एक के बाद एक सब कुछ होगा, हम आपके शो को बंद किए बिना कर सकते हैं, फ्लेक्सबॉक्स पर क्या लागू किया जा सकता है।" डिजाइनर को नुकसान होगा , लेकिन बीहंस पर एक सुंदर ग्रिड के साथ एक पोर्टफोलियो पोस्ट करेगा । लेआउट में उत्पादन के लिए एक लिंक होगा, और बस वर्ग हैं।
• टाइपसेट एक jQuery प्लगइन को लटकाता है जो स्वचालित रूप से पूर्ण स्थिति वाले ग्रिड पर तत्वों की व्यवस्था करता है - सब कुछ ठीक है! इसके अलावा, प्लगइन अतिरिक्त रूप से IE में पेज और बेशर्मी से अंतराल को लोड करेगा। हालांकि, डिजाइनर और बैक-एंड प्रसन्न होंगे ।
• डिजाइनर और लेआउट डिजाइनर एक अविश्वसनीय कहानी पर सहमत होंगे और लागू करेंगे और डिजाइन, बैकएंड और लेआउट से समझौता करेंगे ।

असली मामला

द विलेज पत्रिका के मुख्य पृष्ठ पर एक जटिल ग्रिड है। यह विभिन्न प्रकार की सामग्रियों के लिए जानबूझकर बनाया गया है। मुझे इस बारे में पता है, जब से मैंने एक प्रकाशन में काम किया है।



"द विलेज" ने एक बहुत बड़ा एल्गोरिथ्म लिखा है जो बैकएंड पर एक ग्रिड बनाता है। यह फ्लोट, पूर्ण स्थिति और अन्य डरावनी चीजों का मिश्रण है, लेकिन यह काम करता है!

कभी-कभी यह टूट जाता है, लेकिन जब ऐसा होता है, तो ब्लॉक को बस पुनर्व्यवस्थित किया जाता है और सब कुछ फिर से काम करता है।

मैं कल्पना नहीं कर सकता कि इस प्रणाली को डिजाइन करने में कितने घंटे लगे, इसे डिबग करें और इसे बिना त्रुटियों के लगभग काम करें। यदि आप display: grid; उपयोग display: grid; तो उसी ग्रिड को लागू करने में कितना समय लगेगा display: grid; या grid-auto-flow: dense; ? ग्रिड के अंदर, एक अलग विनिर्देश है जो स्वचालित रूप से पृष्ठ पर तत्वों की व्यवस्था करता है, यह खुद खाली जगहों को बंद कर देता है और एक समान ग्रिड को लागू करता है। आपको बैकएंड कोड की दस हजार लाइनों की आवश्यकता नहीं है - सब कुछ केवल एक संपत्ति के साथ काम करता है।

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

"द विलेज" वे जो चाहते हैं करने के लिए उलझन में पड़ गए, लेकिन अधिकांश ऐसा नहीं करते। इसलिए, हम एक साधारण वेब देखते हैं, मानकीकरण, यह सब एक लेआउट में आता है। हमारे पास बूटस्ट्रैप हुआ करता था, जो अधिकांश कोड का वर्णन करता है। अब डिजाइनरों के पास पहले से ही अपने उपकरण हैं, जैसे बूटस्ट्रैप, जिसके साथ वे साइट बनाते हैं। क्या बकवास है - रचनात्मक कहाँ है?!

हमारा कार्य समुदाय के भीतर ग्रिड का उपयोग करने के लिए सहमत होना नहीं है, बल्कि इसके बारे में डिजाइनरों को बताना है।

मेरा सपना एक डिजाइन सम्मेलन में बोलना है और कहना है: “नमस्ते! हम बेहतर हो गए हैं! हम फिर से होशियार हैं, ”लेकिन उन्हें डिजाइनर सम्मेलनों में कोडर बनाने की अनुमति नहीं है। डिजाइनरों को यह बताने के लिए कि हम बेहतर हो गए हैं, इतना मुश्किल नहीं है। एक साधारण ग्रिड आपके पास आया, आप पूछते हैं: “यह सरल और जटिल क्यों नहीं है? मैं कुछ भी कर सकता हूँ! ”

कार्यान्वयन के संदर्भ में

ग्रिड मुश्किल लगता है। जब वे मुझसे कहते हैं: “मेरे पास 3 कॉलम हैं और मैं इसे फ्लेक्सबॉक्स पर कर सकता हूं। मुझे ग्रिड की आवश्यकता क्यों है? ", फिर मैं उत्तर देता हूं:" वास्तव में, नहीं। " इसलिए, ग्रिड को कहां लागू किया जाए, इसके साथ कठिनाइयां हैं।

ग्रिड न केवल एक जटिल ग्रिड है

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

ग्रिड - छोटे तत्वों के लिए नहीं : या तो बहुत जटिल छोटे लोगों के लिए, या बड़े लोगों के लिए।

लेआउट के लिए ग्रिड

मुझे एक भी साइट नहीं पता है जहाँ आप ग्रिड पर लेआउट को फिर से नहीं लिख सकते हैं और इस पर बहुत सारे अतिरिक्त अतिरिक्त रैपर बचा सकते हैं।

• ग्रिड को वैश्विक लेआउट में लागू किया जा सकता है।
• इंटरफ़ेस तत्वों के लिए ग्रिड लागू किया जा सकता है

यह पिटर्केस_कॉन्फ -2 बैज है, यह एक ग्रिड पर बनाया गया है।



ग्रिड लेआउट का सबसे कठिन हिस्सा एक ग्रिड तैयार करना है जो आपको सूट करता है। इस मामले में, यह सिर्फ 6 * 6 नहीं है, बल्कि 5 * 8 है, लेकिन प्रत्येक ब्लॉक की एक अलग ऊंचाई और चौड़ाई है।

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

फ्लेक्सबॉक्स पर बोर्डिंग पास बनाया जा सकता है।


और यह ग्रिड पर संभव है, और मोबाइल संस्करण में कूपन अलग दिखता है।

संरचना के लिए ग्रिड

याद रखने के लिए दूसरी महत्वपूर्ण बात: ग्रिड का उपयोग करके, आप बस संरचना को बदल सकते हैं ।

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

ग्रिड सरल है। इस उदाहरण में, यदि कोई ग्रिड नहीं है, तो हमें QR कोड के साथ सही भाग को पूर्ण स्थिति में ले जाना होगा। और ग्रिड पर, मोबाइल संस्करण में कोड की 13 लाइनें हैं।



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

कोई आपको नहीं बताएगा: "यहां ग्रिड का उपयोग करें, लेकिन यहां नहीं!" आपको खुद को समझना और सीखना होगा, लेकिन इसके लिए आपको धक्कों को भरना होगा। यदि ग्रिड पर कार्य के कार्यान्वयन में फ्लेक्सबॉक्स की तुलना में दोगुना समय लगता है, तो ऐसे कार्यों को ग्रिड पर हल करने की आवश्यकता नहीं है।



यहां कॉमिक्स के लिए, ग्रिड एकदम सही है।

एक गैर-तुच्छ समस्या पर विचार करें।



यदि आप कोड में देरी करते हैं, तो यह स्पष्ट हो जाता है कि सब कुछ कैसे काम करता है। लोग सीएसएस में कार्यक्रम करते हैं और ग्रिड क्षेत्रों का निर्माण करते हैं। खिलाड़ी की भूमिका के आधार पर, वह स्वचालित रूप से वांछित क्षेत्र में बढ़ जाता है। ऊर्ध्वाधर और क्षैतिज संरेखण निर्माण बनाता है। यह संपूर्ण CSS प्रोग्रामिंग है। सीएसएस कोड की 50 लाइनों के साथ समस्या हल हो गई है, जो बैकएंड या जेएस के माध्यम से बहुत आसान है।

मैं चाहता हूं कि डिजाइन और लेआउट इस तरह से मज़ेदार हों।



यह ग्रिड पर बहुत जटिल लेआउट है, क्योंकि कार्य कठिन था। लेआउट डिज़ाइनर साधारण फ्लेक्सबॉक्स पर लेआउट नहीं बना सकता, केवल ग्रिड। कम कोशिकाओं को बनाना संभव था, लेकिन यह देखते हुए कि कोशिकाओं को दोहराने के द्वारा बनाया गया है, इसमें बहुत समय नहीं लगा। मुख्य बात यह है कि उन्होंने ऐसा किया।

यह जटिल रूप से बनाया गया है, लेकिन इंटरफ़ेस भविष्य में बहुत अच्छा पुनर्निर्माण है।

आगे क्या है?

चलो खुद को, ग्रिड के संदर्भ में "मैं नहीं कर सकता" कहना बंद करो । आप कर सकते हैं - बस नहीं करना चाहते। ग्रिड का उपयोग नहीं करने का कोई वस्तुनिष्ठ कारण नहीं है, सिवाय आलस्य और अनिच्छा के प्रयास के।

ग्रिड एक ऐसी सार्वभौमिक प्रणाली है कि इसके लिए एक ढांचा बनाना भी असंभव है । यदि आप देखते हैं कि कुछ रूपरेखा ग्रिड लेआउट का उपयोग करती है - यह बकवास है, क्योंकि ग्रिड स्वयं ग्रिड के निर्माण के लिए एक रूपरेखा है। बूटस्ट्रैप ग्रिड पर स्विच करने की संभावना नहीं है। कल्पना कीजिए कि 20 मिलियन वर्ग होंगे - एक विकृति!

इसलिए, आपके पास कभी भी तैयार समाधान नहीं होगा। टेम्पलेट हो सकते हैं, लेकिन कोई नियम नहीं होगा कि ग्रिड को कहां लगाया जाए और कहां नहीं।

जानें, उदाहरण देखें, विकास करें । अन्य लोगों के उदाहरणों को देखने में कुछ भी गलत नहीं है। उदाहरण के लिए, मैं ऐसा करता हूं।

टीम के लिए ज्ञान लाओ । कहते हैं कि आप ग्रिड जानते हैं, इसका उपयोग करने का सुझाव देते हैं

डिजाइनर के पास जाइए और कहिए: "आइए आपको और अधिक दिलचस्प लगे और मुझे आपके विचारों का एहसास होगा!"

प्रबंधक को बताएं: "हम ग्रिड के साथ अब और कर सकते हैं!"

टीम के भीतर अपने ज्ञान को साझा करें और वेब को आगे बढ़ाएं। अंततः, हमारे पास एक सरल लक्ष्य है - वेब को बेहतर और कूलर बनाने के लिए !



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

सर्गेई पोपोव के संपर्क: ई-मेल , एफबी , ट्विटर

यह रिपोर्ट फ्रंटेंड कॉन्फ पर सर्वश्रेष्ठ में से एक है। मुझे यह पसंद आया, और अधिक चाहते हैं - समाचार पत्र की सदस्यता लें, जिसमें हम नई सामग्री एकत्र करते हैं और वीडियो तक पहुंच देते हैं, और मई में फ्रंट कॉन्फिडेंट रीट ++ में आते हैं।

आप अधिक जानते हैं और अपने अनुभव को साझा करने के लिए तैयार हैं - उत्कृष्ट! सार भेजें , रिपोर्ट पहले से ही खुली हैं और 27 फरवरी तक जारी रहेगी।