गोल्डन कैनन ग्रिड: फ्रंटेंड के लिए डरावनी कहानी

अधिकांश लोग जो किसी न किसी तरह से साइटों के लेआउट में शामिल होते हैं, के माध्यम से जाते हैं ... चलो इसे "बूटस्ट्रैप पथ" कहते हैं। यह एक ऐसी दार्शनिक स्थिति है जब आपके पास 12 कॉलम हैं और इससे अधिक कुछ नहीं है। आप तत्वों को लेते हैं, उन्हें कुछ स्तंभों में डालते हैं और आपके साथ सब कुछ ठीक है। आप मस्तिष्क को बंद कर सकते हैं, निर्वाण में डुबकी लगा सकते हैं और हाथ स्वयं तत्वों की व्यवस्था करेंगे। सौंदर्य ... लेकिन फिर एक आधुनिक डिजाइनर प्रकट होता है जो कुछ ऐसा खींचता है, ठीक है, इस अद्भुत अवधारणा से बिल्कुल सहमत नहीं है। स्तंभ स्पष्ट रूप से बड़े हैं, वे सभी अलग-अलग चौड़ाई के हैं, और यहां तक ​​कि कुछ को ऊंचाई में संरेखित करने की आवश्यकता है। हॉरर। और यह अधिक बार होता है, खासकर यदि आप दुकानों या व्यवस्थापक क्षेत्रों से एक कदम दूर लेते हैं। आज हम इस बारे में बात करेंगे कि वहां किस तरह के चमत्कार का उपयोग किया जाता है और आधुनिक सीएसएस में इसे कैसे तैयार किया जा सकता है। बहुत कम कोड होंगे, मुख्य रूप से प्रतिबिंब और चित्र।

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

गोल्डन कैनन ग्रिड

आमतौर पर, जब शब्द "सुनहरा", "कैनन" और "डिजाइन" सुना जाता है, तो लोग विभिन्न भ्रमित ज्यामितीय निर्माणों को याद करते हैं, जैसे कुछ:

यह सरल आरेख दिखाता है कि सामान्य रूप से, उस रहस्यमय ग्रिड को बनाने के लिए किन क्रियाओं को करने की आवश्यकता होती है, जिस पर इस लेख में चर्चा की जाएगी। कलाकार और फ़ोटोग्राफ़र आमतौर पर चरण # 2 पर रुक जाते हैं, डिज़ाइनर थोड़ा आगे बढ़ जाते हैं, लेकिन हमें बहुत ही अंतिम चरण के परिणाम की आवश्यकता होती है, जहाँ सभी विकर्ण पहले से ही मिट चुके हैं और केवल ऊर्ध्वाधर और क्षैतिज रेखाएँ बनी हुई हैं, क्योंकि ब्राउज़र में हम सभी आयतों से मिलकर बने होते हैं और हम सोचते हैं आयताकार और सामान्य रूप से हमारे पास एक आयताकार दुनिया है:

यह देखा जा सकता है कि ग्रिड में अलग-अलग सेल आकार होते हैं। वे सभी अलग हैं! और उनमें से एक बहुत हैं! आआआआआआआआआआआआआआआ !!!

किसी भी मेकअप कोडर को अब भाग जाना चाहिए:

वास्तव में, यदि आप कागज का एक टुकड़ा लेते हैं और आकर्षित करते हैं, तो सब कुछ स्पष्ट हो जाएगा। यदि आप कागज की एक शीट को 4 बराबर भागों में विभाजित करते हैं, और फिर सभी संभव विकर्णों को आकर्षित करते हैं, तो अपने और क्षैतिज या ऊर्ध्वाधर लाइनों के बीच विकर्णों के चौराहे के बिंदु बनते हैं। यदि हम इन बिंदुओं के माध्यम से अधिक क्षैतिज या ऊर्ध्वाधर रेखाएँ बनाते हैं, और फिर अधिक विकर्ण बनाते हैं, तो हमें अधिक चौराहे बिंदु मिलते हैं, आदि। तो आप अंतहीन पर जा सकते हैं।

यदि आप अभी भी स्कूल की ज्यामिति को याद करते हैं, तो आप शायद पहले से ही अनुमान लगा चुके हैं कि कम्पास और शासक की सहायता से एक खंड को समान भागों में विभाजित करने का कार्य बड़ी चतुराई से छिपा हुआ था। और इसलिए यह है। अंततः, हमें लाइनें मिलती हैं जो शीट से कट जाती हैं 1/2, 1/3, 1/4, 1/6, 1/8, आदि। वास्तव में, आधुनिक दुनिया में, आपको कुछ भी बनाने की आवश्यकता नहीं है - कंप्यूटर खुद ही सब कुछ साझा कर सकता है, लेकिन फिर भी, क्षितिज के लिए, यह जानना उपयोगी है कि यह दादाजी तरीके से कैसे बनाया गया है।

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

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

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

अंतरिक्ष के बहुत सारे, थोड़ा सामग्री

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

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

ऐसी साइटों पर, हमारे पास आमतौर पर तीन प्रकार के तत्व होते हैं - पाठ, चित्र या वीडियो और सजावटी आकार। शुरुआती, और कभी-कभी बहुत शुरुआती नहीं होते हैं, लेआउट डिजाइनर लेआउट लेते हैं और माथे पर पिक्सेल में इन सभी के आयामों की नकल करना शुरू करते हैं। जिसमें पैडिंग भी शामिल है। और फ़ॉन्ट आकार। नतीजतन, जब आप ब्राउज़र विंडो के अनुपात को बदलते हैं, तो सब कुछ "बाहर निकल जाता है" और अब इतना महान नहीं दिखता है। यह इस तथ्य के कारण है कि उनमें फ़ॉन्ट आकार से संबंधित तत्वों के गुण (अक्षरों में शब्दों या शब्दों की संख्या सहित, वक्रता के त्रिज्या आदि) टूट जाते हैं और नकारात्मक स्थान का पुनर्वितरण होता है। और अगर फोंट का मुद्दा अभी भी CSS-द्वार , अनुकूली टाइपोग्राफी और REM / EM में सब कुछ के आकार (उदाहरण के लिए एक ही स्मैशिंग मैगज़ीन पर) की मदद से हल किया जा सकता है, तो नकारात्मक स्थान के साथ आपको और अधिक गंभीर उपायों की आवश्यकता है। और हमारा अजीब ग्रिड बचाव के लिए आता है।

सिस्टम के खिलाफ मैजिक प्रतिशत

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

आपको सभी दर्द महसूस करने के लिए, कल्पना करें कि पृष्ठ के दाईं ओर ग्रिड पर इसके ऊपरी (अब बाईं ओर) किनारे के साथ गठबंधन किया गया नेविगेशन तत्व 90 डिग्री है, लेकिन इसकी ऊंचाई (अब चौड़ाई) ग्रिड कोशिकाओं की चौड़ाई से कम है जिसमें यह स्थित है, और जो लोग ग्रिड के बारे में नहीं जानते हैं, वे आदत से बाहर हैं, अपने निचले (अब दाएं) किनारे से ब्राउज़र विंडो के दाईं ओर सबसे छोटी दूरी तय करते हैं, लेकिन इस दूरी का ग्रिड से कोई मामूली संबंध नहीं है। यह स्क्रीन के दाहिने किनारे से ग्रिड गाइड लाइन की दूरी है जो इस विशेष तत्व में एक निश्चित लाइन ऊंचाई के साथ सशर्त पाठ के आकार को घटाती है। और पेज पर दर्जनों ऐसे तत्व हैं। और सीएसएस में उनके पदों का ग्रिड से कोई लेना-देना नहीं है, हालांकि वे सिद्धांत में इस पर संरेखित हैं। यहां पहले ब्लैक ऑप्स से एक तस्वीर डालना आवश्यक होगा, जहां नायक संख्या देखता है। बहुत सारी संख्या।

लेकिन क्या होगा अगर मैं आपको बताता हूं कि यह सब करने के लिए एक प्रणाली है? चलो हमारे 20x20 "घुमावदार" ग्रिड को उपरोक्त पृष्ठों पर रखना और बस एक नज़र रखना।

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

और फिर, सब कुछ यादृच्छिक रूप से स्थित नहीं है। एकमात्र तत्व जो थोड़ा खटखटाया जाता है वह केंद्र का पाठ है। लेकिन एक नज़दीकी नज़र से यह स्पष्ट होता है कि वह थोड़ा दायीं ओर (तीरों द्वारा दिखाया गया है) शिफ्ट किया गया है, लेकिन यदि परिवर्तन को हटा दिया जाता है, तो वह ठीक उसी स्थान पर गिर जाएगा, जिसे मैंने गुलाबी रंग में परिक्रमा की थी।

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

शायद आपने इस तरह के डिज़ाइन और बहुत सारे एनिमेशन के साथ साइटों को देखा है (भले ही पृष्ठों के बीच कोई WebGL और जटिल संक्रमण न हो, तो wow.js लगभग हमेशा होता है)। तो, वहाँ सब कुछ ग्रिड पर समान रूप से बनाया गया है, और तत्वों की सभी उपस्थिति सीएसएस परिवर्तनों की मदद से होती है, जब परिवर्तन द्वारा अग्रिम में ग्रिड से तत्व को "हटा दिया" जाता है, और फिर अपनी मूल स्थिति में एनिमेटेड होता है।

लड़की के चारों ओर पतले rhombus को नोट करना महत्वपूर्ण है। आप सोच सकते हैं कि उसने सिस्टम को बाईं ओर से छोड़ा था, लेकिन यह केवल पहली नज़र में है। वास्तव में, वह उसके साथ नहीं, बल्कि चित्र से जुड़ी हुई है, और उसने ग्रिड की असमानता के कारण "उड़ान भरी"।

विशिष्ट संख्याओं की तुलना में व्यवहार का तर्क अधिक महत्वपूर्ण है

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

बस पिक्सेल आयामों की नकल न करें, सीएसएस में विभिन्न स्थिति विकल्पों का अध्ययन करें और हमेशा संदर्भ पर ध्यान दें। यह कोड समर्थन को काफी सरल कर सकता है और अनुकूलन क्षमता पर काम कर सकता है।

20 तक गिनती सीखना

व्यावहारिक भाग और लेखन कोड पर जाने से पहले, मैं इस तरह के ग्रिड में ब्लॉकों की गिनती के बारे में कुछ शब्द कहना चाहूंगा। यह एक ही समय में लेआउट में और पृष्ठ पर (ग्रिड के साथ एक कंटेनर के लिए 100% से 100% आकार की पृष्ठभूमि-छवि के माध्यम से) दोनों में प्रदर्शित किया जा सकता है, लेकिन आपको अभी भी गिनना होगा।

व्यक्तिगत रूप से, यह इस दृष्टिकोण के साथ सुविधाजनक है कि ग्रिड को 5x5 ब्लॉकों के टुकड़ों में चित्रित करें और उन्हें नेविगेट करें:

1, 5/6, 10/11, 15/16, 20 से गिनती, 1 से 5 तक संख्याओं को जोड़ना या घटाना इतना मुश्किल नहीं है, केवल एक चीज जो थोड़ी भ्रामक हो सकती है वह है घटाव (पहली बार में, सभी को एक दिशा में या किसी अन्य द्वारा गलत किया जाता है) लेकिन यह जल्दी से गुजरता है। बेशक आप पूछते हैं, सामान्य लोगों की तरह 0 के साथ गिनती क्यों नहीं? लेकिन तथ्य यह है कि सीएसएस ग्रिड में गिनती 1 से जाती है।

सीएसएस ग्रिड - गोल्डन बुलेट

उस चुनौती को याद रखें जब कोड की 30 लाइनों में कुछ किया जाता है? तो, ऐसे पृष्ठ को 30 लाइनों से बनाया जा सकता है और कोड पूरी तरह से समझा जा सकेगा। विश्वास नहीं होता? खैर देखते हैं।

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

एक कैलकुलेटर के साथ सशस्त्र, यह मुश्किल नहीं है। और अगर हाथ में पहले से ही गाइड के साथ एक तैयार ग्रिड है, तो यह एक विशुद्ध रूप से यांत्रिक कार्य में बदल जाता है। यदि हम पहली सेल को एक पंक्ति या कॉलम 1 के रूप में लेते हैं, तो हमें आकार 1, 1, 2, 4, 2.66, 5.33, आदि का एक क्रम मिलता है। ये 20 पंक्तियों या स्तंभों और उन गाइडों के साथ ग्रिड के मामले में पहले के सापेक्ष सेल आकार हैं, जैसा कि हमारे उदाहरणों में है। यदि आपके प्रोजेक्ट में ग्रिड में अलग-अलग सेल हैं, तो आपको स्वयं सब कुछ पुनर्गणना करना होगा। हम उन्हें उपरोक्त गुणों में प्रतिस्थापित करते हैं:

.golden-grid { grid-template-rows: 1fr 1fr 2fr 4fr 2.66fr 5.33fr 5.33fr 4.33fr 2.83fr 3.5fr 3.5fr 2.83fr 4.33fr 5.33fr 5.33fr 2.66fr 4fr 2fr 1fr 1fr; grid-template-columns: 1fr 1fr 2fr 4fr 2.66fr 5.33fr 5.33fr 4.33fr 2.83fr 3.5fr 3.5fr 2.83fr 4.33fr 5.33fr 5.33fr 2.66fr 4fr 2fr 1fr 1fr; } 

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

 .golden-grid { display: grid; position: relative; height: 100vh; width: 100%; grid-template-rows: 1fr 1fr 2fr 4fr 2.66fr 5.33fr 5.33fr 4.33fr 2.83fr 3.5fr 3.5fr 2.83fr 4.33fr 5.33fr 5.33fr 2.66fr 4fr 2fr 1fr 1fr; grid-template-columns: 1fr 1fr 2fr 4fr 2.66fr 5.33fr 5.33fr 4.33fr 2.83fr 3.5fr 3.5fr 2.83fr 4.33fr 5.33fr 5.33fr 2.66fr 4fr 2fr 1fr 1fr; background: url('grid.jpg') left top / 100% 100% no-repeat; } 

इस पर ग्रिड को समाप्त माना जा सकता है।

श्रृंगार

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

 <div class='golden-grid'> ... </div> 

हम लड़की के साथ फोटो के स्थान को देखते हैं - यह बाईं सीमा से शुरू होता है, आधा लंबवत और आधे से अधिक क्षैतिज रूप से व्याप्त होता है। ग्रिड के संदर्भ में, यह सेल [11, 1] से शुरू होता है और 10 नीचे और 12 को दाईं ओर फैलाता है। वास्तव में, यदि आप थोड़ा अभ्यास करते हैं, तो सेल की गिनती नहीं करते हुए, बड़ी सटीकता के साथ इन नंबरों का अनुमान लगाना संभव होगा।

 <div class='golden-grid'> <!--    --> <div style='grid-area: 11 / 1 / span 10 / span 12;'></div> </div> 

हम आगे बढ़ते हैं - बाईं पृष्ठभूमि की छवि। यह सभी 20 कोशिकाओं की ऊंचाई और छह की लंबाई में है। सातवें से शुरू होता है? आंख का मीटर धोखा दे सकता है, हम जांचते हैं - सब कुछ सही है।

 <div class='golden-grid'> <!--    --> <div style='grid-area: 11 / 1 / span 10 / span 12;'></div> <!--   --> <div style='grid-area: 1 / 7 / span 20 / span 6;'></div> </div> 

इस प्रकार, हम पृष्ठ पर सभी वस्तुओं से गुजरते हैं:

 <div class='golden-grid'> <!--    --> <div style='grid-area: 11 / 1 / span 10 / span 12;'></div> <!--   --> <div style='grid-area: 1 / 7 / span 20 / span 6;'></div> <!--   --> <div style='grid-area: 14 / 15 / span 7 / span 6;'></div> <!--   --> <div style='grid-area: 1 / 9 / span 13 / span 12;'></div> <!--  --> <div style='grid-area: 3 / 17 / span 1 / span 1;'></div> <!--   --> <div style='grid-area: 3 / 10 / span 1 / span 2;'></div> <!-- "The" --> <div style='grid-area: 14 / 11 / span 1 / span 2;'></div> <!-- "Cools" --> <div style='grid-area: 15 / 11 / span 3 / span 6;'></div> <!-- "how to" --> <div style='grid-area: 7 / 16 / span 4 / span 1;'></div> <!-- -    "how to" --> <div style='grid-area: 7 / 17 / span 1 / span 1;'></div> </div> 

मैं विशेष रूप से इनलाइन शैलियों को लिखता हूं ताकि यह यथासंभव कॉम्पैक्ट हो और आप पूरे पृष्ठ को एक नज़र से कवर कर सकें। व्यवहार में, निश्चित रूप से, इसे सीएसएस में कक्षाओं में रखना समझ में आता है ताकि मीडिया के भाव लिखने में कम से कम आसानी हो।

पहले पृष्ठ पर ब्लॉक की व्यवस्था तैयार है। हम दूसरे तक जाते हैं और इसी तरह आगे बढ़ते हैं:

 <div class='golden-grid'> <!--  --> <div style='grid-area: 1 / 11 / span 20 / span 10;'></div> <!--  --> <div style='grid-area: 4 / 13 / span 14 / span 4;'></div> <!--    --> <div style='grid-area: 3 / 3 / span 1 / span 2;'></div> <div style='grid-area: 3 / 17 / span 1 / span 2;'></div> <!--   --> <div style='grid-area: 7 / 4 / span 1 / span 4;'></div> <!--   --> <div style='grid-area: 11 / 3 / span 5 / span 1;'></div> <!--    --> <div style='grid-area: 17 / 4 / span 1 / span 4;'></div> <!--    --> <div style='grid-area: 12 / 8 / span 6 / span 3; transform: translateX(10%);'></div> <!--     --> <div style='grid-area: 3 / 10 / span 1 / span 2;'></div> <!--   --> <div style='grid-area: 8 / 18 / span 6 / span 1;'></div> </div> 

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

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

प्रयोगों के लिए सैंडबॉक्स ।

और अनुकूलनशीलता के बारे में क्या?

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

• व्यूपोर्ट की ऊँचाई बहुत छोटी है (बहुत चौड़ी, लेकिन नीची है - यह तब होता है जब आप मैन्युअल रूप से विंडो का आकार बदलते हैं या यदि टेबलेट पर कीबोर्ड प्रदर्शित होता है)।
• एक लंबा लेकिन संकरा व्यूपोर्ट जब "दो पेज फैलता है" चौड़ाई और विकृति (एक ऊर्ध्वाधर अभिविन्यास में फोन, टैबलेट) में फिट नहीं होता है।

पहला सवाल आमतौर पर इस तरह के एक ग्रिड पर बने वर्गों के लिए न्यूनतम ऊंचाई निर्धारित करके और पृष्ठ-दर-पृष्ठ स्क्रॉल को बंद करने से हल होता है यदि एक है। इस प्रकार, उपस्थिति संरक्षित है, और इंटरैक्टिव तत्व सुलभ रहते हैं - आप उन्हें स्क्रॉल कर सकते हैं।

मुख्य रूप से सामग्री की खपत के लिए ऊर्ध्वाधर मोबाइल संस्करण की आवश्यकता होती है। वहाँ आप चारों ओर नहीं घूम सकते हैं और सुंदरता और प्रभाव के लिए विशाल इंडेंटेशन बना सकते हैं। आमतौर पर पृष्ठ स्क्रॉल को बंद कर दिया जाता है, ग्रिड पृष्ठभूमि में बंद हो जाता है (इस हद तक कि इसके सभी तत्व डिस्प्ले किए गए हैं: ब्लॉक) और केवल ऊर्ध्वाधर लय बनी हुई है, जो फ़ॉन्ट आकार से जुड़े इंडेंटेशन से अधिक प्राप्त होती है। हालांकि कभी-कभी अपवाद भी होते हैं जब एक डिजाइनर छोटे पर्दे पर खूबसूरती से सब कुछ व्यवस्थित करने का प्रबंधन करता है। इस मामले में, हम बस ग्रिड-क्षेत्र की संपत्ति को एक नए में बदलते हैं और पाठ को सही दिशा में संरेखित करते हैं।

एक महत्वपूर्ण बिंदु ब्रेकप्वाइंट है जिस पर सब कुछ फिर से बनाया गया है। लोकप्रिय उपकरणों के आकार के लिए उन्हें बांधने के समर्थक हैं, लेकिन एक नियमित आधार पर ऐसी स्थितियां हैं जहां ऐसे बिंदुओं को जोड़ने के बाद, सब कुछ बहुत अच्छी तरह से काम नहीं करता है - या तो मोबाइल संस्करण पर अधिक फिट करना संभव होगा, या टैबलेट के बीच में कुछ हटाया या फिर से बनाया जाना चाहिए। आदि सब कुछ एक बड़ी स्क्रीन के लिए मूल डिजाइन पर टिकी हुई है। इसलिए अक्सर अनुकूलन प्रक्रिया इस विषय पर सामग्री-प्रथम या विविधताओं की अवधारणा के लिए आती है, जब सामग्री को आधार के रूप में लिया जाता है और डिजाइन, सुविधा, और लोकप्रिय उपकरणों के स्क्रीन आकारों के आधार पर अंकों का चयन किया जाता है। यही है, सामग्री प्राथमिक है, यह महत्वपूर्ण है कि यह अपने इच्छित रूप में उपभोग करने के लिए सुविधाजनक है, और मोबाइल, टैबलेट और डेस्कटॉप संस्करण पहले से ही माध्यमिक हैं। ये केवल उपकरणों के नाम हैं, लेकिन आधार नहीं हैं। हां, यह इस तथ्य को जन्म दे सकता है कि सामान्य 2-3 से अधिक ब्रेकपॉइंट होंगे, यह 5 या 7 को भी बदल सकता है, लेकिन यह दृष्टिकोण आपको एक लेआउट बनाने की अनुमति देता है जो संकेतित सीमा के भीतर किसी भी स्क्रीन आकार पर सुंदर दिखता है।

संक्षेप में देना

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