विषय
- 01. कस्टम गुण
- डिफ़ॉल्ट सेट करना
- कस्टम गुण प्रीप्रोसेसर चर से कैसे भिन्न होते हैं?
- 02. फ़ीचर प्रश्न
- फ़ीचर प्रश्नों का उपयोग कैसे करें
- 03. मीडिया प्रश्न
- 04. परिवर्तनीय फोंट
- भिन्नता अक्ष
- फ़ॉन्ट-भिन्नता-सेटिंग्स
- पंजीकृत कुल्हाड़ियों
- कस्टम कुल्हाड़ियों
- 05. ग्राफिकल प्रभाव
- 08. सीएसएस ग्रिड और लेआउट
- सीएसएस ग्रिड का उपयोग कैसे करें
CSS लगातार विकसित हो रहा है और वेब डिज़ाइनर के टूलसेट में विनिर्देश को और भी अधिक शक्तिशाली हथियार बनाने के लिए कई रोमांचक नई सुविधाएँ जोड़ी गई हैं।
CSS ग्रिड लेआउट को नए स्तरों पर ले जाता है जो पहले नहीं देखे गए, कस्टम गुण चर की अवधारणा का परिचय देते हैं जबकि फीचर क्वेरी ब्राउज़र समर्थन के लिए जाँच करते हैं। मीडिया क्वेरीज़ नए एक्सेसिबिलिटी गुणों के साथ एक स्तर ऊपर ले जाती हैं, वेरिएबल फोंट न्यूनतम कोड ब्लोट के साथ अधिकतम रचनात्मकता प्रदान करते हैं जबकि स्क्रॉल स्नैपिंग जावास्क्रिप्ट की आवश्यकता को समाप्त करता है। आप क्या बना सकते हैं यह देखने के लिए हमारे शानदार CSS एनिमेशन उदाहरण देखें। या, बिना कोड वाली साइट बनाने के लिए इन वेबसाइट बिल्डरों को आजमाएं।
जो लोग रचनात्मक बनना चाहते हैं उनके लिए अद्वितीय लेआउट के लिए सीएसएस आकार और फ़ोटोशॉप शैली डिजाइन प्रभाव पेश करने के लिए कई मिश्रण मोड और फ़िल्टर हैं। यह जानने के लिए पढ़ें कि आप अपने नवीनतम बिल्ड में इन जरूरी सुविधाओं का उपयोग कैसे कर सकते हैं। लेकिन याद रखें, एक जटिल वेबसाइट का मतलब है कि आपको एक वेब होस्टिंग सेवा की आवश्यकता है जो आपकी आवश्यकताओं का समर्थन कर सके।
01. कस्टम गुण
यदि आपने Sass जैसे प्रीप्रोसेसर का उपयोग किया है, या वास्तव में जावास्क्रिप्ट जैसी प्रोग्रामिंग भाषा का उपयोग किया है, तो आप निस्संदेह चर की अवधारणा से परिचित होंगे - वे मान जो आपके पूरे कोड में पुन: उपयोग के लिए परिभाषित हैं। कस्टम गुण हमें प्रीप्रोसेसरों की आवश्यकता के बिना, हमारे सीएसएस में ऐसा करने में सक्षम बनाते हैं। चर को रूट स्तर (वैश्विक चर बनाने) पर सेट किया जा सकता है या चयनकर्ता के भीतर दायर किया जा सकता है। फिर उन्हें सिंटैक्स का उपयोग करके बुलाया जा सकता है var (-›- myVariableName)। उदाहरण के लिए, हम एक वैरिएबल सेट कर सकते हैं जिसे कहा जाता है --प्राथमिक रंग इस तरह:
/* मूल तत्व (एक वैश्विक चर) पर */ :root { --प्राथमिक रंग: #f45942; } /* चयनकर्ता के दायरे में */ .my-component { --प्राथमिक रंग: #4171f4; }
अब हम उस वैरिएबल को प्रॉपर्टी वैल्यू के रूप में इस्तेमाल कर सकते हैं:
h1 {रंग: var (-—प्राथमिक रंग); }
कस्टम गुण विरासत में मिले हैं, जिनके कुछ बहुत ही उपयोगी निहितार्थ हैं। उनमें से एक थीम है। उपरोक्त उदाहरण लें: हम एक वैश्विक चर ( #f45942 - एक चमकदार नारंगी लाल) को परिभाषित कर सकते हैं --प्राथमिक रंग मूल स्तर पर, इसलिए हर उदाहरण जहां हम इस चर का उपयोग करते हैं, मान लाल होगा। लेकिन हम एक ही वैरिएबल को एक चयनकर्ता के भीतर एक अलग मान (# 4171f4 - मध्यम नीला) के साथ फिर से परिभाषित कर रहे हैं। तो हर उदाहरण के लिए जहां हम उपयोग करते हैं --प्राथमिक रंग उस चयनकर्ता के भीतर चर, परिकलित मान नीला होगा।
डिफ़ॉल्ट सेट करना
चर का दायरा एक महान विशेषता है, लेकिन एक ऐसा जो आपको अवसर पर पकड़ सकता है! यदि आप एक ऐसे चर का उपयोग करने का प्रयास करते हैं जो अभी तक परिभाषित नहीं है, तो परिणामी मान कैस्केड के आगे परिभाषित एक चर के बजाय ब्राउज़र डिफ़ॉल्ट, या विरासत मान पर वापस आ जाएगा। कुछ मामलों में, डिफ़ॉल्ट मान सेट करना उचित हो सकता है:
h1 {रंग: var (-—प्राथमिक रंग, नीला); }
कस्टम गुण प्रीप्रोसेसर चर से कैसे भिन्न होते हैं?
कस्टम गुण कुछ प्रमुख तरीकों से प्रीप्रोसेसर चर से भिन्न होते हैं। आपके कोड को ब्राउज़र पर भेजे जाने से पहले प्रीप्रोसेसर चर संकलित किए जाते हैं। ब्राउज़र कभी नहीं देखता कि एक मान एक चर है, यह केवल अंतिम परिणाम देखता है। कस्टम गुणों की गणना ब्राउज़र में की जाती है। आप आधुनिक डेवलपर टूल में उनका निरीक्षण कर सकते हैं, वेरिएबल को बदल सकते हैं और हल किए गए मान को देख सकते हैं। वे गतिशील चर हैं, जिसका अर्थ है कि उनके मूल्यों को सीएसएस के भीतर या जावास्क्रिप्ट के साथ रनटाइम पर बदला जा सकता है।
प्रीप्रोसेसर चर के विपरीत, कस्टम गुणों का उपयोग चयनकर्ता नामों, संपत्ति कुंजियों या मीडिया क्वेरी घोषणाओं के भीतर नहीं किया जा सकता है - केवल CSS संपत्ति मान। CSS प्रीप्रोसेसरों के अभी भी बहुत सारे लाभ हैं, इसलिए हम उन्हें थोड़ी देर के लिए इधर-उधर चिपके हुए देख सकते हैं, लेकिन कस्टम गुणों के संयोजन में उनका अधिक बार उपयोग किया जाएगा।
02. फ़ीचर प्रश्न
फ़ीचर क्वेरीज़ यह जांचने का एक तरीका है कि क्या कोई ब्राउज़र आपकी CSS फ़ाइल के भीतर किसी विशेष CSS संपत्ति-मूल्य संयोजन का समर्थन करता है। वे मॉडर्निज़र जैसे फीचर-डिटेक्शन लाइब्रेरी की आवश्यकता को वस्तुतः हटा देते हैं। सिंटैक्स मीडिया क्वेरी के समान है: आप एट-नियम का उपयोग करते हैं @समर्थन, इसके बाद आपकी संपत्ति-मूल्य जोड़ी, कोड को लपेटकर निष्पादित किया जाएगा यदि ब्राउज़र निर्दिष्ट शर्तों को पूरा करता है।
फ़ीचर क्वेश्चन आधुनिक ब्राउज़रों में अच्छी तरह से समर्थित हैं, लेकिन वे अपेक्षाकृत नए हैं, और एक "गॉचा" यह है कि कुछ ब्राउज़र जिन्हें आप समर्थन के लिए परीक्षण करना चाहते हैं, वे स्वयं फीचर प्रश्नों का समर्थन नहीं कर सकते हैं। अक्सर इसे संभालने का सबसे अच्छा तरीका यह है कि पहले फॉलबैक स्टाइल प्रदान करें (फीचर क्वेरी के बाहर), फिर अपने एन्हांसमेंट को सपोर्टिंग ब्राउजर के अंदर लपेटें @समर्थन नियम।
सावधान रहें, फीचर प्रश्नों को केवल संयम से उपयोग करने की आवश्यकता है। CSS की महान विशेषताओं में से एक यह है कि ब्राउज़र किसी भी ऐसे गुण या मान को अनदेखा कर देगा जिसे वे नहीं समझते हैं। केवल फीचर प्रश्नों को नियोजित करना सबसे अच्छा है जब ऐसा नहीं करने से एक दृश्य बग होगा, अन्यथा आप बहुत सारे अतिरिक्त काम के लिए खुद को स्थापित कर सकते हैं।
फ़ीचर प्रश्नों का उपयोग कैसे करें
एकल संपत्ति मूल्य के समर्थन का परीक्षण करने के लिए, हम पहले फ़ॉलबैक प्रदान कर सकते हैं। इस उदाहरण में, हम उन ब्राउज़र के लिए फ्लेक्सबॉक्स फ़ॉलबैक प्रदान कर रहे हैं जो ग्रिड लेआउट का समर्थन नहीं करते हैं।
.my-घटक {प्रदर्शन: ग्रिड; } @समर्थन (प्रदर्शन: ग्रिड) { .my-घटक { प्रदर्शन: फ्लेक्स; } }
03. मीडिया प्रश्न
आप व्यूपोर्ट की चौड़ाई और ऊंचाई, और मीडिया के प्रकार (आमतौर पर स्क्रीन या प्रिंट) का पता लगाने के लिए मीडिया प्रश्नों का उपयोग करने के आदी होंगे। स्तर 5 मीडिया क्वेरी विनिर्देश हमें (वैकल्पिक रूप से) परीक्षण के लिए कुछ नई मीडिया सुविधाएँ लाता है, जो पहले से ही कुछ ब्राउज़रों में समर्थित हैं। ये पहुँच के लिए कुछ बेहतरीन लाभ प्रदान करते हैं।
वेस्टिबुलर विकार वाले उपयोगकर्ता, और जो लोग मोशन सिकनेस से पीड़ित हैं, वे बहुत अधिक गति वाले वेब पेजों की सराहना नहीं कर सकते हैं, जैसे एनिमेशन और लंबन स्क्रॉलिंग प्रभाव। प्रेफरेंस-रिड्यूस्ड-मोशन मीडिया क्वेरी का उपयोग करके, हम उन उपयोगकर्ताओं को प्रदान कर सकते हैं जो कम गति वाले विकल्प के साथ ऑप्ट आउट करते हैं।
.my-element {एनिमेशन: शेक 500ms ईज़ी-इन-आउट 5; } @मीडिया (पसंद-कम-गति: कम करें) { .my-element { एनिमेशन: कोई नहीं; } }
वैकल्पिक डार्क थीम प्रदान करने के लिए वेबसाइटों के लिए यह तेजी से लोकप्रिय हो रहा है। पसंद-रंग-योजना हमें यह पूछने की अनुमति देती है कि क्या उपयोगकर्ता ने सिस्टम-व्यापी वरीयता निर्धारित की है (कीवर्ड डार्क, लाइट, या नो-वरीयता का उपयोग करके), और तदनुसार उचित रंग योजना दिखाएं।
/* मीडिया क्वेश्चन 02 */ बॉडी { बैकग्राउंड: लीनियर-ग्रेडिएंट (टू बॉटम, #b5faff, #ffe2b4); } @मीडिया (पसंद-रंग-योजना: गहरा) {शरीर {रंग: सफेद; पृष्ठभूमि: रैखिक-ढाल (नीचे से, #0c1338, #3e3599); } }
04. परिवर्तनीय फोंट
सामान्य तौर पर, यदि हम अपने वेबपेज पर एक ही परिवार के कई अलग-अलग फॉन्ट चेहरों को शामिल करना चाहते हैं, तो हमें समान संख्या में फॉन्ट फाइल लोड करने की आवश्यकता होगी। आप जितनी अधिक फ़ॉन्ट फ़ाइलें लोड करते हैं, प्रदर्शन पर प्रभाव के साथ आप अपने पृष्ठ पर उतना ही अधिक भार जोड़ते हैं - इसलिए आमतौर पर अधिकतम तीन या चार फ़ॉन्ट फ़ाइलें लोड करना बुद्धिमानी है (आपके प्रदर्शन बजट के आधार पर)।
परिवर्तनीय फोंट वह सब बदल देते हैं। वे हमें पूरे फ़ॉन्ट परिवार के लिए एकल फ़ॉन्ट फ़ाइल लोड करने में सक्षम बनाते हैं। यद्यपि यह फ़ाइल आमतौर पर एक फ़ॉन्ट से बड़ी होगी, यदि आप अलग-अलग वज़न और शैलियों का लाभ उठाना चाहते हैं, तो एक चर फ़ॉन्ट अधिक प्रदर्शन करने वाला समाधान है। यदि आपने एक संपूर्ण फ़ॉन्ट परिवार खरीदा है, तो इसे क्लाउड स्टोरेज में सुरक्षित रूप से रखना याद रखें ताकि आप अपनी फाइलें न खोएं!
भिन्नता अक्ष
इतना ही नहीं, लेकिन परिवर्तनशील फोंट के साथ, हम फ़ॉन्ट भार के एक छोटे उपसमुच्चय तक सीमित नहीं हैं। नियमित फ़ॉन्ट के साथ काम करते समय, उपलब्ध फ़ॉन्ट वज़न १०० के गुणकों में दिए जाते हैं। आमतौर पर, ४०० नियमित वजन, ३०० हल्के वजन, और ७०० मोटे वजन हो सकते हैं - विभिन्न परिवारों के साथ अधिक या कम वजन की आपूर्ति। परिवर्तनीय फोंट में भिन्नता की धुरी होती है, जो हमें फ़ॉन्ट वजन जैसे गुणों के लिए मूल्यों की एक श्रृंखला प्रदान करती है। एक फ़ॉन्ट में १-९०० की धुरी हो सकती है, जो हमें ९०० विभिन्न भारों तक पहुंच प्रदान करेगी!
भिन्नता की धुरी केवल वजन तक ही सीमित नहीं है। परिवर्तनीय फोंट में एक्स-ऊंचाई, तिरछा, सेरिफ़ लंबाई और कंट्रास्ट के लिए अलग-अलग अक्ष हो सकते हैं (केवल कुछ उदाहरण लेने के लिए) - जिसका अर्थ है कि एक एकल फ़ॉन्ट फ़ाइल हमें सैकड़ों, या हजारों विविधताओं तक पहुंच प्रदान कर सकती है! हम इन गुणों को चेतन भी कर सकते हैं, जिससे हम वास्तव में कुछ अच्छे प्रभाव प्राप्त कर सकते हैं। मैंडी माइकल (https://codepen.io/mandymichael) के पास रचनात्मक डेमो का एक पूरा भार है जो वास्तव में सीमाओं का परीक्षण करता है।
वेरिएबल फोंट के लिए ब्राउज़र समर्थन बहुत अच्छा है, और कई फॉन्ट फाउंड्री सक्रिय रूप से नए वेरिएबल फोंट विकसित कर रहे हैं जिन्हें आप अभी उपयोग करना शुरू कर सकते हैं - हालांकि ये अक्सर प्रीमियम पर आते हैं, खासकर अधिक पूर्ण-विशेषीकृत फ़ॉन्ट परिवारों के लिए। यदि आप चर फोंट के साथ खेलना शुरू करना चाहते हैं तो यह देखने के लिए कि वे क्या कर सकते हैं, कई परिवर्तनीय फ़ॉन्ट खेल का मैदान साइटें हैं:
सावधान रहें, यदि आप अभी चर फोंट का उपयोग करना चाहते हैं तो आपको यह सुनिश्चित करने की आवश्यकता है कि आप एक अप-टू-डेट ऑपरेटिंग सिस्टम का उपयोग कर रहे हैं - वे पुराने ओएस पर काम नहीं करेंगे।
फ़ॉन्ट-भिन्नता-सेटिंग्स
जबकि हम फ़ॉन्ट वजन को आसानी से बदल सकते हैं फ़ॉन्ट वजन सीएसएस संपत्ति, फ़ॉन्ट-भिन्नता-सेटिंग्स एक नई संपत्ति है जो हमें एक फ़ॉन्ट की भिन्नता के विभिन्न अक्षों तक पूर्ण पहुंच प्रदान करती है। इनमें पंजीकृत कुल्हाड़ियों और कस्टम कुल्हाड़ियों दोनों शामिल हैं।
पंजीकृत कुल्हाड़ियों
पाँच अलग-अलग पंजीकृत कुल्हाड़ियाँ हैं, जो विभिन्न CSS गुणों के अनुरूप हैं। इनमें से प्रत्येक में "अक्ष टैग" के रूप में जाना जाता है। पंजीकृत कुल्हाड़ियों हैं: wght (फ़ॉन्ट वजन), डब्ल्यूडीटीएच (फ़ॉन्ट-खिंचाव), एसएलएनटी (फ़ॉन्ट-शैली: तिरछा/कोण), डिजिटल (फ़ॉन्ट-शैली: इटैलिक), ओप्स्ज़ो (फ़ॉन्ट-ऑप्टिकल-साइज़िंग)। हम इन कुल्हाड़ियों तक या तो CSS संपत्ति द्वारा, या इसके साथ पहुँच सकते हैं फ़ॉन्ट-भिन्नता-सेटिंग्स.
जरूरी नहीं कि ये कुल्हाड़ियाँ हर चर फ़ॉन्ट में शामिल हों (कुछ में केवल एक या दो कुल्हाड़ियाँ हो सकती हैं), लेकिन वे सबसे आम होने की संभावना है।
कस्टम कुल्हाड़ियों
कस्टम अक्ष फ़ॉन्ट डिज़ाइनर द्वारा शामिल किए गए बीस्पोक अक्ष हैं, और कुछ भी हो सकते हैं। वे शामिल कर सकते हैं (उदाहरण के लिए) सेरिफ़ लंबाई, x-ऊंचाई, यहां तक कि कुछ अधिक रचनात्मक (और कम टाइपोग्राफ़िक रूप से विशिष्ट), जैसे रोटेशन।
दोनों प्रकार के कुल्हाड़ियों को चार-वर्ण वाले टैग के रूप में व्यक्त किया जाना चाहिए। पंजीकृत कुल्हाड़ियों को लोअरकेस होना चाहिए, जबकि कस्टम कुल्हाड़ियों को अपरकेस होना चाहिए। दोनों को फ़ॉन्ट-भिन्नता-सेटिंग्स संपत्ति में जोड़ा जा सकता है। फ़ॉन्ट-भिन्नता-सेटिंग्स एनिमेटेबल है, जो कुछ बहुत ही अच्छे UI प्रभावों की अनुमति दे सकती है! आइकन फोंट का उपयोग करके भी कुछ बहुत ही रोचक प्रयोग किए गए हैं।
05. ग्राफिकल प्रभाव
कई वेबसाइटें जावास्क्रिप्ट लाइब्रेरी का लाभ उठाकर एक स्लीक, नेटिव ऐप जैसा स्क्रॉल अनुभव प्रदान करती हैं, जहां सामग्री "स्नैप" के रूप में उपयोगकर्ता स्क्रॉल के रूप में इंगित करती है। अब, स्क्रॉल स्नैप विनिर्देश के साथ, हम इसे अपनी सीएसएस फ़ाइल के भीतर कर सकते हैं - आपके पेज को ब्लोट करने के लिए भारी जेएस मॉड्यूल में आयात करने की आवश्यकता नहीं है!
स्क्रॉल-स्नैपिंग को लागू करने के लिए हमें अपने स्क्रॉल कंटेनर के रूप में कार्य करने के लिए एक तत्व की आवश्यकता होती है। कंटेनर के सीधे बच्चे उन बिंदुओं को निर्देशित करते हैं जिन्हें स्नैप किया जाएगा, और स्नैप क्षेत्र के भीतर विभिन्न तरीकों से गठबंधन किया जा सकता है।
एक और नए सीएसएस संपत्ति मूल्य के साथ संयुक्त होने पर स्क्रॉल स्नैपिंग और भी प्रभावी हो सकती है - स्थिति: चिपचिपा. यह स्थिति मान किसी तत्व को उसके कंटेनर के भीतर स्क्रॉल करते समय एक निर्दिष्ट स्थान पर "चिपक जाता है" - एक और व्यवहार जो पहले केवल जावास्क्रिप्ट के साथ संभव था। इस स्क्रॉल स्नैप को स्थिति के साथ देखें: चिपचिपा और चौराहा ऑब्जर्वर उदाहरण।
08. सीएसएस ग्रिड और लेआउट
फ्रंट-एंड डेवलपर्स ने उस समय उपयोग करने के लिए जो भी उपकरण उपलब्ध थे, उनके साथ लेआउट को हैक कर लिया है - सबसे हाल ही में फ्लेक्सबॉक्स, जो कि बहुत सारे आधुनिक ग्रिड सिस्टम का उपयोग करते हैं। लेकिन फ्लेक्सबॉक्स को कभी भी सख्त ग्रिड बनाने के लिए डिज़ाइन नहीं किया गया था - इसका उद्देश्य लचीलापन है!
CSS ग्रिड पहला विनिर्देश है जो द्वि-आयामी लेआउट के लिए डिज़ाइन किया गया है, जिससे हमें एक लेआउट बनाने और पंक्ति और स्तंभ अक्ष दोनों पर आइटम रखने पर पूर्ण नियंत्रण की अनुमति मिलती है। ग्रिड के साथ एक प्रतिक्रियाशील लेआउट बनाने के लिए कैल्क () या नकारात्मक मार्जिन के साथ हैकिंग की आवश्यकता नहीं होती है। गुप्त हथियार fr इकाई है - ग्रिड के लिए अनन्य एक नई इकाई। उपलब्ध स्थान के अनुपात के रूप में fr इकाई ग्रिड ट्रैक्स (पंक्तियों और स्तंभों) को आकार देती है। यह किसी भी निश्चित ट्रैक, गटर और सामग्री को ध्यान में रखता है, फिर शेष स्थान को उसी के अनुसार वितरित करता है। जेन सीमन्स ने वेब लेआउट के नए युग का वर्णन करने के लिए "आंतरिक वेब डिज़ाइन" शब्द गढ़ा, जिसमें ग्रिड ने प्रवेश किया।
सीएसएस ग्रिड का उपयोग कैसे करें
ग्रिड कंटेनर के रूप में कार्य करने के लिए ग्रिड को ग्रिड पर सेट डिस्प्ले प्रॉपर्टी मान वाले तत्व की आवश्यकता होती है। ग्रिड कंटेनर के प्रत्यक्ष बच्चे वे आइटम हैं जिन्हें ग्रिड पर रखा जा सकता है। हम गुणों का उपयोग करते हैं ग्रिड-टेम्पलेट-पंक्तियाँ तथा ग्रिड-टेम्पलेट-कॉलम ग्रिड की पटरियों (पंक्तियों और स्तंभों) को परिभाषित करने के लिए, और कॉलम-गैप तथा पंक्ति-अंतराल गटर (पटरियों के बीच अंतराल) को परिभाषित करने के लिए।
.ग्रिड {डिस्प्ले: ग्रिड; ग्रिड-टेम्पलेट-कॉलम: दोहराना (4, 1fr); ग्रिड-टेम्पलेट-पंक्तियाँ: दोहराएँ (4, 200px); गैप: 20px; }
हम का उपयोग कर रहे हैं दोहराना () लॉन्गहैंड के विकल्प के रूप में कोड को अधिक संक्षिप्त रखने के लिए कार्य करता है (उदा। ग्रिड-टेम्पलेट-कॉलम: 1fr 1fr 1fr 1fr) यह उदाहरण शॉर्टहैंड का भी उपयोग करता है अन्तर के लिये पंक्ति-अंतराल तथा कॉलम-गैप.
उपरोक्त कोड हमें चार पंक्ति ट्रैक देता है, प्रत्येक 100px ऊंचा, और चार कॉलम ट्रैक जो प्रत्येक fr इकाई का उपयोग करके उपलब्ध स्थान के बराबर अनुपात को भरते हैं।
यह ध्यान देने योग्य है कि ग्रिड ट्रैक बनाने का यह एकमात्र तरीका नहीं है। ग्रिड आइटम रखकर इंप्लिक्ट ट्रैक्स भी बनाए जा सकते हैं। यदि आप ग्रिड का उपयोग कर रहे हैं तो इसके बारे में थोड़ा पढ़ना उपयोगी है, क्योंकि यह इस बात की गहरी समझ प्राप्त करने के लिए भुगतान करता है कि ग्रिड विभिन्न परिस्थितियों में कैसे व्यवहार करता है, और एक लेआउट को कोडिंग करना बहुत आसान बना सकता है।
हम ग्रिड लाइन नंबरों को संदर्भित करके ग्रिड पर आइटम रख सकते हैं, जो संख्यात्मक रेखाएं हैं जो प्रत्येक ट्रैक के बीच बैठती हैं। यहाँ, हम आशुलिपि का उपयोग कर रहे हैं ग्रिड-स्तंभ तथा ग्रिड-पंक्ति के लिये ग्रिड-स्तंभ-शुरू, ग्रिड-स्तंभ-अंत, ग्रिड-पंक्ति-शुरू तथा ग्रिड-पंक्ति-अंत. ये ब्राउज़र को बताते हैं कि हमारे आइटम को प्रत्येक अक्ष पर किस लाइन पर शुरू और समाप्त होना चाहिए।
.आइटम {ग्रिड-कॉलम: १/४; ग्रिड-पंक्ति: 2; }
ग्रिड हमें आइटम रखने के कई अलग-अलग तरीके प्रदान करता है: इसके बजाय हम अपनी ग्रिड लाइनों को नाम दे सकते हैं:
.ग्रिड {डिस्प्ले: ग्रिड; ग्रिड-टेम्पलेट-कॉलम: [इमेज-स्टार्ट] 1fr 1fr 1fr [इमेज-स्टार्ट] 1fr; ग्रिड-टेम्पलेट-पंक्तियाँ: 200px [छवि-प्रारंभ] 200px 200px [छवि-अंत] 200px; गैप: 20px; }
वैकल्पिक रूप से, ग्रिड-टेम्पलेट-क्षेत्र संपत्ति हमें टेक्स्ट के साथ ग्रिड लेआउट "ड्रा" करने देती है।
.ग्रिड {डिस्प्ले: ग्रिड; ग्रिड-टेम्पलेट-कॉलम: दोहराना (4, 1fr); ग्रिड-टेम्पलेट-पंक्तियाँ: दोहराएँ (4, 200px); गैप: 20px; ग्रिड-टेम्पलेट-क्षेत्र: '। . . .' 'छवि छवि छवि।' 'छवि छवि छवि।' '। . . .'; }
इन विधियों में से किसी एक का उपयोग करके, हम ग्रिड आइटम रखते समय केवल संबंधित ग्रिड क्षेत्र को संदर्भित कर सकते हैं:
छवि {ग्रिड-क्षेत्र: छवि; }
यह लेख मूल रूप से क्रिएटिव वेब डिज़ाइन पत्रिका में प्रकाशित हुआ थावेब डिजाइनर. इश्यू 290 अभी खरीदें।
- 2019 में 10 सर्वश्रेष्ठ सीएसएस फ्रेमवर्क
- CSS के साथ SVG में एनिमेशन कैसे जोड़ें
- 2019 में बेहतर तरीके से काम करने में आपकी सहायता के लिए 52 वेब डिज़ाइन टूल
