🕣 👩‍⚖️ ➿ सीएसएस ग्रिड नामकरण 📍 ㊙️ 📜

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

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

अनुवादक से:
दो साल पहले (2017) एक लेख, लेकिन यह सीएसएस ग्रिड के महत्वपूर्ण यांत्रिकी पर छूता है, और इसलिए आज उपयोगी और प्रासंगिक लगता है।

रेखा नामकरण

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

.grid { display: grid; grid-gap: 20px; grid-template-rows: 20vh ; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; } .header { grid-row: 1; grid-column: 1 / -1; } .sidebar { grid-row: 2; grid-column: 1 / 3; } .content { grid-row: 2; grid-column: 3 / -1; }

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

 .grid { display: grid; grid-gap: 20px; grid-template-rows: [header-start] 20vh [header-end] ; grid-template-columns: [sidebar-start] 1fr 2fr [sidebar-end] 1fr 2fr 1fr 2fr; } .header { grid-row: header-start; grid-column: 1 / -1; } .sidebar { grid-row: 2; grid-column: sidebar-start / sidebar-end; }

नाम span कीवर्ड के अलावा कुछ भी हो सकता है। जिन कारणों से आप इस लेख में बाद में जानेंगे, आरंभिक पंक्तियों के लिए प्रत्यय-स्टार्ट के साथ नामकरण (भले ही यह एक पंक्ति या स्तंभ रेखा हो) और -end लिए -end एक अच्छा अभ्यास है। परिणाम main-start और main-end या sidebar-start और sidebar-end ।

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

 .grid { display: grid; grid-gap: 20px; grid-template-rows: [header-start] 20vh [header-end] ; grid-template-columns: [full-start sidebar-start] 1fr 2fr [sidebar-end main-start] 1fr 2fr 1fr 2fr [main-end full-end]; } .header { grid-row: header-start; grid-column: full-start / full-end; } .sidebar { grid-row: 2; grid-column: sidebar-start / sidebar-end; } .content { grid-row: 2; grid-column: main-start / main-end; }

यह उदाहरण दर्शाता है कि आपको प्रत्येक व्यक्तिगत ग्रिड लाइन को नाम देने की आवश्यकता नहीं है, और वह लाइन नंबर जिनका उपयोग नामों के अलावा किया जा सकता है, हमेशा उपलब्ध होते हैं।

कोडपेन 1. लाइन नामकरण

इसी नाम की रेखाएं।

हमने देखा कि कैसे रेखाओं के कई नाम हो सकते हैं, लेकिन ऐसी स्थितियाँ भी हैं जहाँ कई पंक्तियों का नाम समान है। यह तब होता है जब आप repeat() फ़ंक्शन का उपयोग करते हैं और ट्रैक सूची में नामित लाइनें शामिल होती हैं। निम्न उदाहरण छह नामित रेखाएं बनाता है, जिन्हें वैकल्पिक रूप से col-a-start और col-b-start ।

 .grid { display: grid; grid-gap: 20px; grid-template-columns: repeat(3, [col-a-start] 1fr [col-b-start] 2fr); }

यदि आप किसी तत्व को पोजिशन करते समय col-a-start निर्दिष्ट करते हैं, तो उसे col-a-start (जिसे माना जाता है कि पहली ग्रिड लाइन होगी) नाम के साथ सामना की गई पहली पंक्ति पर रखा जाएगा। एक ही सिद्धांत द्वारा, यदि आप किसी तत्व को पोजिशन करते समय col-b-start निर्दिष्ट करते हैं, तो उसे दूसरी ग्रिड लाइन पर रखा जाएगा।

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

 .box3 { grid-row: 2; grid-column: col-a-start 2 / col-b-start 3; }

कोडपेन 2. एक ही नाम वाली लाइनें।

विनिर्देशन इस व्यवहार को "ग्रिड लाइनों का एक नामित सेट बनाने" के रूप में वर्णित करता है ।

एक अनुकूली ग्रिड के पुनर्निर्माण के समय रेखा के नाम

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

निम्नलिखित सरल उदाहरण में, मैं एक संकीर्ण स्क्रीन के लिए ग्रिड कॉलम को परिभाषित करता हूं, और फिर उन्हें 550px की चौड़ाई के साथ फिर से परिभाषित करता हूं।

 .grid { display: grid; grid-gap: 20px; grid-template-rows: [header-start] 20vh [header-end]; grid-template-columns: [full-start ] 10px [sidebar-start main-start] 1fr [main-end sidebar-end] 10px [full-end]; } @media (min-width: 550px) { .grid { grid-template-columns: [full-start sidebar-start] 1fr 2fr [sidebar-end main-start] 1fr 2fr 1fr 2fr [main-end full-end]; } }

कोडपेन 3. नामकरण की चीजें: नामित लाइनों की स्थिति को फिर से परिभाषित करना

नामित क्षेत्र

इससे पहले, हम केवल नामित लाइनों पर विचार करते थे, लेकिन एक और तरीका है। हम ग्रिड क्षेत्रों का नाम दे सकते हैं।

एक ग्रिड क्षेत्र एक आयताकार क्षेत्र होता है जिसमें एक या अधिक ग्रिड कोशिकाएँ होती हैं। क्षेत्र को चार ग्रिड लाइनों द्वारा परिभाषित किया गया है जो स्तंभों और पंक्तियों के लिए शुरुआत और अंत लाइनों का संकेत देते हैं।

हम grid-template-areas संपत्ति का उपयोग करके ग्रिड क्षेत्रों का नाम देते हैं। यह संपत्ति ASCII तालिका के रूप में लेआउट का वर्णन करती है और लाइनों का एक सेट है, जिनमें से प्रत्येक ग्रिड के एक अलग लाइन ट्रैक का वर्णन करता है।

 .grid { display: grid; grid-template-columns: repeat(3, 1fr 2fr) ; grid-template-areas: "head head head head head head" "side side main main main main" "foot foot foot foot foot foot"; }

grid-template-areas प्रॉपर्टी की पंक्तियों में हम जो नाम इस्तेमाल करते हैं, वे grid-area प्रॉपर्टी का उपयोग करके ग्रिड के सीधे बच्चों को सौंपे जाते हैं। इस संपत्ति का मूल्य, जब नामकरण के लिए उपयोग किया जाता है, तथाकथित उपयोगकर्ता पहचानकर्ता है , इसलिए इसे उद्धरण चिह्नों में संलग्न करने की आवश्यकता नहीं है

 .header { grid-area: head; } .sidebar { grid-area: side; } .content { grid-area: main; } .footer { grid-area: foot; }

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

"गैर-आयताकार या काट दिए गए क्षेत्रों को इस मॉड्यूल के भविष्य के संस्करणों में अनुमति दी जा सकती है"
- संपत्ति ग्रिड-टेम्पलेट-क्षेत्र

ग्रिड का वर्णन करते समय, आपको इसकी पूर्ण प्रस्तुति का ध्यान रखने की आवश्यकता होती है, अन्यथा पूरा विज्ञापन अमान्य माना जाएगा। इसका मतलब है कि प्रत्येक ग्रिड सेल को भरना होगा।

 grid-template-areas: "head head head head head head" "side side main main main main" "foot foot foot foot foot foot"; }

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

 grid-template-areas: "head head head head head head" "side side main main main main" "....... ....... foot foot foot foot"; }

कोडपेन 4. नामित क्षेत्र

यदि आप सभी नवीनतम फ़ायरफ़ॉक्स DevTools ग्रिड इंस्पेक्टर सुविधाओं का लाभ लेने के लिए फ़ायरफ़ॉक्स को पहले से डाउनलोड नहीं करते हैं, तो मैं यह सलाह देता हूं कि नाम वाले क्षेत्रों में काम करते समय

फ़ायरफ़ॉक्स ब्राउज़र के "ग्रिड इंस्पेक्टर" में नामित क्षेत्रों का प्रदर्शन ( मूल खोलें )

नामांकित रेखाएँ क्षेत्र बनाती हैं

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

निम्नलिखित उदाहरण में, दोनों पंक्तियों और स्तंभों के लिए, मैं पंक्तियों को panel-start और panel-end नाम देता हूं। इससे मुझे पैनल नाम का क्षेत्र मिलेगा। यदि मैं इसे पृष्ठ पर किसी तत्व के लिए grid-area संपत्ति के मूल्य के रूप में सेट करता हूं, तो यह इन पंक्तियों द्वारा परिभाषित क्षेत्र में तत्व को रखेगा।

 .grid { display: grid; grid-gap: 20px; grid-template-columns: 1fr [panel-start] 2fr 1fr 2fr 1fr [panel-end] 2fr; grid-template-rows: 10vh [panel-start] minmax(200px, auto) 10vh [panel-end]; grid-template-areas: "head head head head head head" "side side main main main main" ".... .... foot foot foot foot"; } .panel { grid-area: panel; }

कोडपेन 5. नामित रेखाओं से निर्मित क्षेत्र

नामित क्षेत्रों से लाइनें बनती हैं

नामित क्षेत्रों से बनाई गई लाइनों का उपयोग करके, हम ऊपर दिखाए गए कार्यों के विपरीत भी कर सकते हैं। प्रत्येक क्षेत्र समान प्रत्यय और -end के समान प्रत्यय सम्मेलन का उपयोग करके चार नामित लाइनें बनाता है। यदि एक नामित क्षेत्र है जिसे main कहा जाता है, तो इसकी शुरुआत और अंत रेखा और स्तंभ लाइनें main-start और main-end । इन नामित रेखाओं का उपयोग किसी तत्व को स्थित करने के लिए किया जा सकता है।

निम्नलिखित उदाहरण में, मैं इन स्वचालित रूप से उत्पन्न लाइनों के नामों का उपयोग करके पैनल को रखता हूँ:

 .grid { display: grid; grid-template-areas: "head head head head head head" "side side main main main main" ".... .... foot foot foot foot"; } .panel { grid-column: main-start / main-end; grid-row: head-start / foot-end; }

कोडपेन 6. नामित क्षेत्रों से लाइनें बनती हैं

क्षेत्र के नाम के बराबर लाइन नाम

-start और -end साथ लाइनों के अलावा, इस क्षेत्र के नाम के साथ किसी भी ग्रिड क्षेत्र के चेहरे के लिए लाइनें बनाई जाती हैं। इस प्रकार, यदि कोई main क्षेत्र है, तो आप grid-row-start या grid-column-start गुणों के लिए main पहचानकर्ता का उपयोग कर सकते हैं, और सामग्री इस क्षेत्र की शुरुआत से स्थित होगी। यदि आपने grid-row-end या grid-column-end प्रॉपर्टी के लिए इस मान का उपयोग किया है, तो इस क्षेत्र की अंतिम पंक्ति का चयन किया जाता है। नीचे दिए गए उदाहरण में, मैं स्तंभ के लिए main के अंत से .panel तत्व को .panel हूं और लाइनों के लिए main के अंत से foot अंत तक शुरू करता .panel

 .panel { grid-column: main; grid-row: main / foot ; }

कोडपेन 7. क्षेत्र के नाम के बराबर लाइन नाम

ग्रिड-क्षेत्र संपत्ति स्पष्टीकरण

grid-area संपत्ति के बारे में कुछ जानना उपयोगी है। अनिवार्य रूप से, एक पहचानकर्ता जैसे कि main रूप में grid-area का उपयोग करते समय हम क्या करते हैं कि हम grid-area सभी चार पंक्तियों का वर्णन कैसे करते हैं। grid-area संपत्ति के लिए मान्य मूल्य भी लाइन नंबर हैं।

 .main { grid-area: 2 / 1 / 4 / 3; }

इसका प्रवेश के समान प्रभाव है:

 .main { grid-row-start: 2; grid-column-start: 1; grid-row-end: 4; grid-column-end: 3; }

जब तुम पूछते हो

 .main { grid-area: main; }

इसका वास्तव में मतलब है:

 .main { grid-area: main / main / main / main ; }

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

हालांकि, यदि आप एक उपयोगकर्ता आईडी का उपयोग करते हैं और कुछ लाइनों को छोड़ देते हैं, तो वे निम्नानुसार सेट होते हैं

तीन लाइन के नाम निर्दिष्ट

 .main { grid-area: main / main / main ; }

यदि आप तीन पंक्ति नाम निर्दिष्ट करते हैं, तो अनिवार्य रूप से आप grid-column-end को याद कर रहे हैं। यदि grid-column-start एक उपयोगकर्ता पहचानकर्ता है, तो grid-column-end लिए समान पहचानकर्ता भी सेट किया गया है। जैसा कि हमने देखा है, -end संपत्ति main के अंतिम चेहरे का उपयोग करेगी, इसलिए यदि grid-column-start और grid-column-end एक ही नाम पर सेट grid-column-end , तो सामग्री इस क्षेत्र के सभी स्तंभों तक खिंची हुई है।

दो लाइन के नाम निर्दिष्ट

 .main { grid-area: main / main ; }

जब केवल दो नाम निर्दिष्ट किए जाते हैं, तो पंक्तियों और स्तंभों की शुरुआती पंक्तियां सेट की जाती हैं। यदि grid-column-start और / या grid-row-start उपयोगकर्ता पहचानकर्ता है, तो grid-column-end और grid-row-end क्रमशः एक ही मूल्य पर सेट होते हैं।

निर्दिष्ट एक पंक्ति का नाम

 .main { grid-area: main ; }

सिंगल लाइन नाम सेट करना ठीक वैसा ही है जैसा आप ग्रिड-एरिया को एरिया के मुख्य नाम पर सेट करते हैं। इस स्थिति में, सभी चार पंक्तियाँ इस मान पर सेट हैं।

नोट : यह grid-column और grid-row दोनों के लिए काम करता है।

इस विधि का वास्तव में मतलब है कि आप एक तत्व रखने के लिए ग्रिड में स्तंभों या पंक्तियों का एक सेट नामित कर सकते हैं। जैसे grid-area प्रॉपर्टी के लिए grid-area -end वैल्यूज उसी तरह सेट की जाती हैं जैसे कि शुरुआती (जब छोड़ा गया हो), तो grid-column और grid-row गुणों के लिए अंतिम मान भी व्यवहार करते हैं। इसका मतलब है कि आप main क्षेत्र के प्रारंभ और अंत कॉलम लाइनों के बीच के तत्व का उपयोग कर सकते हैं:

 .main { grid-column: main ; }

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

एक ग्रिड में कई नामित लाइनें हो सकती हैं।

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

नामकरण और संक्षिप्त ग्रिड और ग्रिड-टेम्पलेट गुण

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

ग्रिड-टेम्पलेट का संक्षिप्त नाम: एक स्पष्ट ग्रिड बनाना

आप एक ही समय में एक जगह पर एक स्पष्ट ग्रिड के सभी गुणों को सेट करने के लिए grid-template शॉर्टकट का उपयोग कर सकते हैं

 grid-template-columns grid-template-rows grid-template-areas

इसका मतलब है कि आप एक ही समय में नामित लाइनों और नामित क्षेत्रों को परिभाषित कर सकते हैं। नामित क्षेत्रों और रेखाओं को मिलाने वाली संपत्ति का उपयोग करते समय, मैं सबसे पहले grid-template-areas संपत्ति का मूल्य निर्धारित करूंगा, जैसा कि ऊपर दिए गए अनुभाग में वर्णित है।

तब आप लाइन नाम जोड़ना चाह सकते हैं। उन्हें मूल्यों की प्रत्येक पंक्ति के आरंभ में और अंत में रखा जाता है - याद रखें कि मूल्यों की प्रत्येक पंक्ति एक लाइन ट्रैक का प्रतिनिधित्व करती है। स्ट्रिंग्स का नाम या नाम वर्ग कोष्ठक के अंदर होना चाहिए, जैसे कि grid-template-rows संपत्ति में grid-template-rows नामकरण करते समय, और लाइन ट्रैक को परिभाषित करने वाले मानों के स्ट्रिंग के आसपास उद्धरण चिह्नों के बाहर होना चाहिए।

नीचे दिए गए उदाहरण में, मैंने दो लाइन लाइनों का नाम दिया: panel-start हेडर लाइन (ग्रिड की दूसरी पंक्ति) और panel-end अंतिम पाद लाइन (तीन लाइन पटरियों के साथ ग्रिड की चौथी पंक्ति) के बाद आता है। मैंने इस लाइन ट्रैक का वर्णन मूल्य रेखा के अंत में एक पैरामीटर जोड़कर नामांकित और अनाम लाइनों के लिए लाइन ट्रैक का आकार निर्धारित किया था

 .grid { display: grid; grid-gap: 20px; grid-template: " head head head head head head" 10vh [panel-start] "side side main main main main" minmax(200px, auto) ".... .... foot foot foot foot" 10vh [panel-end]; }

यदि स्तंभों को नाम देना आवश्यक है, तो हम इसे पंक्ति के अंदर नहीं कर सकते, इसलिए हमें विभाजक / जोड़ने की आवश्यकता है, और फिर स्तंभ पटरियों की एक सूची को परिभाषित करें। लाइनों को इस तरह नामित किया जाता है जैसे कि यह सूची grid-template-columns संपत्ति का मूल्य थी।

 .grid { display: grid; grid-gap: 20px; grid-template: " head head head head head head" 10vh [panel-start] "side side main main main main" minmax(200px, auto) ".... .... foot foot foot foot" 10vh [panel-end] / [full-start ] 1fr [panel-start] 2fr 1fr 2fr 1fr [panel-end] 2fr [full-end]; }

इस उदाहरण में, जिसे आप नीचे दिए गए कोडपेन में देख सकते हैं, मैं पंक्तियों और स्तंभों के लिए लाइनों का एक अतिरिक्त सेट बनाता हूं, ये लाइनें panel नाम के एक क्षेत्र को परिभाषित करती हैं, क्योंकि मैंने सिंटैक्स panel-start और panel-end । इस तरह से मैं grid-area प्रॉपर्टी के panel मूल्य को सेट करके तत्व को रख सकता हूं।

पहली नज़र में, यह बल्कि समझ से बाहर है। तो, यहां हम उन स्तंभों की एक सूची बनाते हैं जो ऊपर परिभाषित हमारी ASCII तालिका के अनुसार हैं। वैकल्पिक रूप से, template-areas और template-columns की परिभाषा को संरेखित करने के लिए मानों के बीच रिक्त स्थान जोड़ें।

कोडपेन 8. ग्रिड-टेटप्लेट संक्षिप्त नाम

ग्रिड संक्षिप्त नाम: अंतर्निहित और स्पष्ट जाल

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

 grid-template-columns grid-template-rows grid-template-areas grid-auto-columns grid-auto-rows grid-auto-flow

हमारे उद्देश्यों के लिए, grid संक्षिप्त नाम का उपयोग grid-template का उपयोग करने के समान होगा, क्योंकि हम एक अंतर्निहित ग्रिड परिभाषा को परिभाषित करते हैं। केवल अंतर grid-auto–* गुणों को रीसेट करने में होगा। grid संक्षिप्त नाम का उपयोग या तो स्पष्ट ग्रिड को सेट करने और अंतर्निहित गुणों को रीसेट करने के लिए किया जा सकता है, या अंतर्निहित ग्रिड को सेट करने और स्पष्ट गुणों को रीसेट करने के लिए किया जा सकता है। एक ही समय में दोनों करने से ज्यादा मतलब नहीं है

 .grid { display: grid; grid-gap: 20px; grid: " head head head head head head" 10vh [panel-start] "side side main main main main" minmax(200px, auto) ".... .... foot foot foot foot" 10vh [panel-end] / [full-start ] 1fr [panel-start] 2fr 1fr 2fr 1fr [panel-end] 2fr [full-end]; }

नोट : सीएसएस ग्रिड विनिर्देश के मूल अनुशंसित संस्करण में, यह कमी grid-column-gap और grid-row-gap कोशिकाओं के बीच अंतर गुणों को भी रीसेट करती है। हालाँकि, इस व्यवहार को अंततः बदल दिया गया था। ब्राउज़र इस व्यवहार को अपडेट करते हैं, लेकिन लेखन के समय (अक्टूबर 2017), आप अभी भी ऐसी स्थिति का सामना कर सकते हैं जहां कमी का उपयोग करने पर gap गुणों का मूल्य शून्य पर रीसेट हो जाता है, इसलिए आपको बाद में उन्हें फिर से परिभाषित करने की आवश्यकता हो सकती है

किस दृष्टिकोण का उपयोग करें?

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

बुनियादी नामकरण सम्मेलनों

आलेख को सारांशित करने के लिए, मैं सीएसएस ग्रिड की लाइनों या क्षेत्रों का नामकरण करते समय ध्यान में रखने के लिए कुछ बुनियादी नियमों को याद करूंगा:

लाइन नामकरण:

आप लगभग किसी भी नाम (स्पैन कीवर्ड को छोड़कर) का उपयोग कर सकते हैं, लेकिन आप इन पंक्तियों से बने क्षेत्र का उपयोग भी कर सकते हैं, यदि उनके नाम अंत तक आते हैं और -end
लाइनों में वर्ग कोष्ठक के अंदर परिभाषित कई नाम हो सकते हैं और एक स्थान से अलग हो सकते हैं
कई लाइनों का एक ही नाम हो सकता है; यदि आपको किसी विशिष्ट की आवश्यकता है, तो क्रम में नाम के बाद आवश्यक पंक्ति की संख्या जोड़ें

नामकरण क्षेत्र:

grid-template-areas का उपयोग करते हुए एक क्षेत्र को परिभाषित करते समय, क्षेत्र का आकार आयताकार होना चाहिए
grid-template-areas संपत्ति का उपयोग करते समय, grid-template-areas प्रत्येक लाइन ट्रैक को मानों की एक स्ट्रिंग के रूप में दर्शाया जाता है और उद्धरण चिह्नों में प्रदर्शित किया जाता है
प्रत्येक सेल को भरना होगा। यदि डिज़ाइन द्वारा आप कुछ कोशिकाओं को खाली छोड़ना चाहते हैं, तो इसके लिए एक डॉट का उपयोग करें . या दीर्घवृत्त ... कोई स्थान नहीं
नामित क्षेत्र इस क्षेत्र के समान नाम के साथ रेखाएँ बनाते हैं, लेकिन -start और -end । उनका उपयोग तत्वों को स्थिति में करने के लिए किया जा सकता है।

सीएसएस ग्रिड नामकरण