सीएसएस ग्रिड - वेबसाइट और एप्लिकेशन लेआउट के लिए स्विस सेना चाकू

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

आप शायद पहले से ही नियमित तत्वों के लिए CSS ब्लॉक मॉडल से परिचित हैं। चलो सीएसएस ग्रिड के लिए एक समान "सामान्य अवलोकन" के साथ शुरू करते हैं:


CSS ग्रिड संरचना के मूल में मुख्य कंटेनर है, जो margin , border और padding साथ एक नियमित div । सीएसएस ग्रिड कंटेनर बनाने के लिए, display: grid जोड़ें display: grid संपत्ति। ग्रिड तत्व मूल कंटेनर के अंदर रखे गए वंशज हैं। उन्हें आमतौर पर header , sidebar , footer या साइट के लेआउट के अन्य समान तत्वों का वर्णन करने वाली सूची के रूप में परिभाषित किया जाता है, जो इसके डिजाइन पर निर्भर करता है।

इस मामले में, हमारे पास 3 div । तीसरा 2 कोशिकाओं पर फैला है।

कृपया ध्यान दें कि एक नकारात्मक समन्वय प्रणाली का उपयोग करके लाइनों को विपरीत दिशा में भी गिना जा सकता है।

ऊपर के उदाहरण से ग्रिड में 5 बाय 4 कोशिकाओं का आकार है। इसे निम्नानुसार परिभाषित किया गया है:

 div#grid { /* This is our CSS grid parent container */ display: grid; grid-template-columns: 100px 100px 100px 100px 100px; /* 5 cols */ grid-template-rows: 100px 100px 100px 100px; /* 4 rows */ } 

पंक्तियों और स्तंभों की संख्या निर्धारित मूल्यों के अनुसार निर्धारित की जाती है। कोशिकाओं के बीच रेखाएं और अतिरिक्त मार्जिन हैं। पंक्तियों के बीच की पंक्तियों और स्तंभों को ग्रिड स्ट्रिप्स कहा जाता है। दी गई दिशा में लाइनों की संख्या हमेशा [कोशिकाओं की संख्या + 1] के बराबर होगी। तो 5 कॉलम में 6 लाइनें होंगी, जबकि 4 पंक्तियों में 5 लाइनें होंगी। निम्नलिखित उदाहरण में, हम 7 कॉलम और केवल 1 पंक्ति देखते हैं:


पहली विशेषताओं में से एक जिसे सीएसएस ग्रिड के व्यवहार में नोट किया जा सकता है (डिफ़ॉल्ट रूप से, सीएसएस ग्रिड की कोई सीमा नहीं है, इसलिए पहले तत्व के ऊपरी बाएं कोने में 1 से ऊपर और 1 से बाईं ओर दाएं लाइनें शुरू होती हैं। उन पर इंडेंटेशन लागू नहीं होता है; ग्रिड लाइन इंडेंट के बीच में स्थित है; यदि padding प्रॉपर्टी सेट की जाती है, तो भी इंडेंटेशन पहली और आखिरी लाइनों पर लागू नहीं होता है)

सबसे पहले, सीएसएस ग्रिड के संबंध में यह ध्यान दिया जाना चाहिए कि बाहरी रेखाएं अंतराल के आकार से स्वतंत्र हैं। केवल आंतरिक रेखाएँ। हम बाद में और अधिक विस्तार से इसकी जांच करेंगे, जब हम भिन्नात्मक ( fr ) इकाइयों को देखेंगे।

CSS ग्रिड दो आयामी है। तत्वों को क्षैतिज रूप से (स्तंभ) या लंबवत (पंक्ति) रखा जा सकता है। grid-auto-flow संपत्ति का मूल्य निर्धारित करें।

यह फ्लेक्स के समान काम करता है:


grid-auto-flow: row का उपयोग करना grid-auto-flow: row या grid-auto-flow: column उस दिशा को निर्धारित करने के लिए जिसमें तत्व ग्रिड को भरते हैं।

एक अमूर्त ग्रिड की कल्पना करें:



इसलिए, हमारे पास एक सामान्य विचार है कि यह कैसे काम करता है।

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

आइए कुछ उदाहरणों को देखकर अपने ज्ञान को मजबूत करें:



मैंने केवल दो div तत्वों का उपयोग किया। और ऐसा एक ग्रिड निकला।

लागू और स्पष्ट सामग्री प्लेसमेंट

लेकिन क्या होगा अगर हम सूची में एक और आइटम जोड़ दें?



तत्व 3 को एक ही लेआउट में जोड़ना स्वचालित रूप से इसका विस्तार होगा (नीला तत्व)। पहली पंक्ति से मानों की प्रतिलिपि बनाकर यह नया स्थान स्वचालित रूप से बनाया गया है। आइए आइटम 4 जोड़ें?



फिर से, सीएसएस ग्रिड ने तत्व 4 को दूसरी पंक्ति में शेष स्थान पर फैलाने का फैसला किया। ऐसा इसलिए हुआ क्योंकि grid-template-rows केवल 1 पंक्ति के लिए स्थान को ठीक से परिभाषित करती हैं। बाकी तो अपने आप हो जाता है।

नीले तत्वों की नियुक्ति आपके द्वारा स्पष्ट रूप से इंगित नहीं की गई थी। यह एक निहित (स्वचालित) प्लेसमेंट है। तत्व बस इस अंतरिक्ष में आते हैं।

स्पष्ट सामग्री प्लेसमेंट

यदि आप सूची के सभी तत्वों के लिए मान निर्धारित करते हैं, तो आप कोशिकाओं से यही अपेक्षा करते हैं:



अनिवार्य रूप से, आप grid-template-rows संपत्ति का उपयोग करके अधिक मूल्यों को जोड़कर लगातार सभी पंक्तियों के आकार को नियंत्रित कर सकते हैं। ध्यान दें, इस मामले में, तत्व अब छिपे नहीं हैं। आपने उन्हें निश्चित रूप से पहचान लिया है (25px 75px)।

ऑटो रिक्ति

CSS ग्रिड एक चर / अज्ञात मान में स्वचालित रूप से कोशिकाओं को फैलाने के लिए कई गुण प्रदान करता है। स्तंभ और पंक्तियों के लिए ऑटो-विस्तार के कुछ मूल उदाहरण यहां दिए गए हैं:



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

सीएसएस ग्रिड संकेत

CSS ग्रिड की बात करें तो, इंडेंटेशन को नजरअंदाज करना असंभव है। इंडेंटेशन ग्रिड कोशिकाओं के बीच क्षैतिज और ऊर्ध्वाधर स्थान है।

grid-column-gap और grid-row-gap गुणों का उपयोग करके अंतराल को नियंत्रित किया जाता है:



आप दोनों दिशाओं के लिए अलग-अलग इंडेंट का उपयोग कर सकते हैं। यह वीडियो या छवि गैलरी बनाने के लिए उपयोगी हो सकता है:



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



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

माप fr की इकाइयाँ (आंशिक भाग)

आंशिक भागों ( fr ) सीएसएस ग्रिड के लिए अद्वितीय हैं। मूल भाग में शेष तत्वों के आधार पर आंशिक भाग को स्थान आवंटित होता है:



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


भिन्नात्मक इकाइयों को बदलने का व्यवहार किसी दिए गए दिशा के लिए प्रस्तुत सभी मूल्यों पर आधारित है

इस उदाहरण में, केवल स्तंभ व्यवहार को स्पष्टता के लिए दिखाया गया है। लेकिन इसी तरह यह स्ट्रिंग्स के लिए काम करता है। बस grid-template-row संपत्ति का उपयोग करें।

आंशिक भागों और इंडेंटेशन के साथ उनकी बातचीत

भिन्नात्मक भागों द्वारा परिभाषित स्थान इंडेंटेशन के आधार पर बदलता है। जब अंतराल जोड़े जाते हैं तो उसी मूल कंटेनर के अंदर का 1fr मान छोटे आकार में कम हो जाएगा:


हमने fr इकाइयों के साथ निर्दिष्ट कोशिकाओं के बीच रिक्ति को जोड़ा है

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

ये नए बदलाव पिक्सेल-टू-पिक्सेल डिज़ाइन को अतीत में छोड़ देते हैं। अब हम एक सहज दृष्टिकोण का उपयोग करके डिजाइन के बारे में सोच रहे हैं।

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

सामग्री पोस्टिंग

हमने अभी CSS ग्रिड की संरचना को देखा। मुझे आशा है कि आपको सीएसएस ग्रिड में सामग्री कैसे संरचित है इसका अंदाजा है। अब हमें कल्पना दिखाना है और कुछ तत्वों को ग्रिड के अंदर रखना है। उसके बाद, मानक सीएसएस ग्रिड व्यवहार बदल सकता है। ऐसा कैसे होता है, हम अब विचार करेंगे।

कोशिकाओं या ग्रिड लेआउट क्षेत्रों के अंदर वस्तुओं की व्यवस्था करने के लिए, आपको उन्हें कोशिकाओं के बीच की रेखाओं तक पहुंचना चाहिए। कोई table स्पेसिंग नहीं।

सीएसएस ग्रिड आपको एक तालिका में क्या होता है, उसी तरह की सामग्री क्षेत्र (सेल स्पेस में) की चौड़ाई और ऊंचाई निर्धारित करने के लिए रिक्ति का उपयोग करने की अनुमति देता है। हम इस पर स्पर्श करेंगे। लेकिन आप लाइन नंबर या इसके नाम (बाद में इस पर अधिक) का उपयोग करके प्रारंभिक सेल को निर्दिष्ट कर सकते हैं। यह आपकी पसंद पर निर्भर करता है।

कई कोशिकाओं पर सामग्री की नियुक्ति के संबंध में, सबसे स्पष्ट और आकर्षक कोशिकाओं का संघ है।

सेल सामग्री जोड़ना

आप कई कोशिकाओं में तत्वों को जोड़ सकते हैं।
महत्वपूर्ण : संघ आसपास के तत्वों के स्थान को बदलता है।

ग्रिड-कॉलम और ग्रिड-पंक्ति के साथ विलय करें

हम निम्नलिखित तत्व के लिए grid-column और grid-row गुणों का उपयोग करते हैं:



तत्व 7 को समायोजित करने के लिए कई कोशिकाओं के विलय के बाद नीले तत्वों का स्थान बदल गया। नारंगी तत्वों को अगली पंक्ति में धकेल दिया गया।

ऐसा ही करने का एक और तरीका है।

ग्रिड-कॉलम-स्टार्ट के साथ जुड़ना ...

... grid-column-end , grid-row-start और grid-row-end - आप विशिष्ट प्रारंभ और अंत बिंदुओं को परिभाषित कर सकते हैं जिसके द्वारा आप कोशिकाओं को मर्ज करना चाहते हैं।

मैंने 15 (नारंगी) के बाद आइटम हटा दिए क्योंकि उनकी अब आवश्यकता नहीं है:


इन गुणों को उस आइटम के लिए सीधे सेट करें, जिस पर उन्हें लागू किया जाना चाहिए।

स्तंभ और पंक्तियों की सामग्री को खींचना दोनों दिशाओं में काम करता है।

न्यूनतम सामग्री और अधिकतम सामग्री

min-content और max-content मानों का उपयोग grid-template-columns या grid-template-rows गुणों में किया जाता है, जैसे आकार से संबंधित कोई अन्य मूल्य (उदाहरण के लिए, px , 1fr , आदि)।



आइए इस नमूने को देखें। यह हमारा शुरुआती बिंदु है। हम यह देखने के लिए स्थिति को थोड़ा बदल देंगे कि न्यूनतम / अधिकतम मान कोशिकाओं को कैसे प्रभावित करते हैं।

आइए देखें कि यदि हम min-content और max-content min-content का उपयोग करते हुए स्तंभों में से एक को बदलते हैं तो क्या परिणाम प्राप्त होंगे:



एक शब्द से पाठ के साथ, परिणामों के बीच अंतर दिखाई नहीं देता है, चाहे हम min-content या max-content min-content उपयोग करें। नमस्ते ही एकमात्र शब्द है। इसके न्यूनतम और अधिकतम मूल्य समान हैं।

लेकिन अधिक जटिल पाठ के लिए चीजें अधिक दिलचस्प होती जा रही हैं। निम्न उदाहरण min-content या max-content min-content लिए महत्वपूर्ण विचार प्रदर्शित करता max-content :



यहाँ min-content ने बेस चौड़ाई के रूप में वाक्य (अजनबी) में सबसे लंबे शब्द का इस्तेमाल किया। यदि आप max-content उपयोग करते हैं, तो रिक्त स्थान के साथ संपूर्ण पाठ स्ट्रिंग सेल स्थान को भरता है। लेकिन क्या होता है यदि हम सभी कोशिकाओं पर min-content या max-content min-content लागू करते हैं?



मैंने देखा कि डिफ़ॉल्ट रूप से पाठ तब केन्द्रित किया गया था जब मैंने min-content उपयोग किया था, हालांकि text-align: center सेट नहीं text-align: center ।

छवियाँ और अधिकतम सामग्री

मैंने एक सेल में नीले गुलाब की एक छवि रखी। और, जैसा कि अपेक्षित था, चित्र के लिए पर्याप्त स्थान प्रदान करने के लिए ग्रिड का विस्तार हुआ:



जब मैंने चित्र की चौड़ाई को 50% पर सेट कर दिया, तो परिणाम देखने के लिए, CSS ग्रिड अभी भी छवि के आकार का 100% पर चौड़ाई रखता है, लेकिन इसे 50% चौड़ाई (उम्मीद के अनुसार) पर प्रदर्शित करता है और स्वचालित रूप से इसे कक्ष के अंदर क्षैतिज रूप से केंद्रित करता है ।

पाठ और छवि (या अन्य सामग्री) दोनों स्वतः डिफ़ॉल्ट रूप से CSS ग्रिड कोशिकाओं में केंद्रित हो जाएंगे।

सामग्री की स्थिति

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

अलग-अलग दिशाओं में परेशान

मुझे नहीं लगता कि सीएसएस ग्रिड की विशिष्टता हमें इस बारे में बताती है। हालांकि, ऑफसेट को 360 ° के भीतर सेट करना संभव है।

यह इनलाइन और ब्लॉक तत्वों के साथ समान काम करता है! मुझे लगता है कि यह संपूर्ण CSS ग्रिड की मेरी पसंदीदा विशेषता है।



align-self और justify-self गुणों का उपयोग करके सभी 9 संयोजन संभव हैं। मैं उन्हें नीचे बताऊंगा।

संरेखित आत्म

यह प्रॉपर्टी कंटेंट को लंबवत रखने में मदद करती है।



align-self: start उपयोग align-self: start सामग्री को सेल के शीर्ष पर संरेखित करना align-self: start करें।
align-self: center उपयोग align-self: center से लंबवत align-self: center ।
align-self: end उपयोग align-self: end सेल के नीचे संरेखित करने के लिए align-self: end ।

दोनों ओर संरेखित-स्व

यह संपत्ति क्षैतिज रूप से सामग्री को स्थिति में लाने में मदद करती है।



justify-self: start उपयोग करें justify-self: start सेल के बाएं किनारे पर सामग्री को संरेखित करना justify-self: start करें।
justify-self: center उपयोग करें justify-self: center को क्षैतिज रूप से justify-self: center ।
justify-self: end उपयोग करें justify-self: end सेल को दाएं-संरेखित करने के लिए justify-self: end ।

आप किसी भी दिशा में कुछ भी संरेखित करने के लिए justify-self और align-self के 9 संयोजनों में से किसी का उपयोग कर सकते हैं।

क्षेत्र के टेम्पलेट

एरिया टेम्प्लेट को grid-template-areas प्रॉपर्टी का उपयोग करके परिभाषित किया गया है।



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



यहां लेफ्ट 3 कोशिकाओं को एकजुट करने वाला क्षेत्र है। CSS ग्रिड स्वचालित रूप से इसे एकल इकाई मानता है। सम्यक वस्तु। इस सरल उदाहरण में, मैंने 2 कॉलम बनाए। लेकिन आप विचार को समझ गए। बड़े क्षेत्रों को मिलाकर नाम दें।

इस क्षेत्र में एक तत्व रखने के लिए, बस grid-area: TemplateName उपयोग करें grid-area: TemplateName गुण। इस मामले में, grid-area: Left या grid-area: Right ।

टेम्प्लेट नाम में कोई स्थान उपयोग नहीं किया जा सकता है। यहाँ मैंने पानी का छींटा मारा।

सीएसएस ग्रिड में एक एरिया टेम्पलेट का उपयोग करके केस स्टडी

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

मैंने दो साइडबार, हेडर और फुटर के साथ एक आदिम वेबसाइट लेआउट बनाया। मुख्य क्षेत्र केंद्र में है और 3 x 2 कोशिकाओं के क्षेत्र को कवर करता है:



यहां हमारे पास केवल 5 तत्व हैं। अधिक जोड़ें और उन्हें मुख्य क्षेत्र से निहित कोशिकाओं में धकेल दिया जाएगा।

बस सुनिश्चित करें कि आपकी खिड़कियां हमेशा वर्गाकार या आयताकार हों।

रेखा के नाम

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

निम्नलिखित दिखाता है कि यह कैसा दिखता है:



रेखाओं को नाम देने के लिए चौकोर कोष्ठकों का उपयोग करें। फिर इन नामों का उपयोग उस लंबाई को निर्धारित करने के लिए करें जिस पर आपके तत्वों को आगे की स्लैश का उपयोग करके बढ़ाया जाना चाहिए।

निष्कर्ष में

CSS ग्रिड एक व्यापक, व्यापक विषय है।

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

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

CSS ग्रिड केवल HTML का हिस्सा नहीं है। उत्तरदायी वेबसाइट और एप्लिकेशन बनाने के लिए यह एक पूर्ण प्रणाली है।

इसके गुण और मूल्य पारंपरिक HTML टैग्स का उपयोग करके वेबसाइट बनाने में एक दशक से अधिक के अनुभव के आधार पर प्रौद्योगिकियों पर आधारित हैं।

LOOKING.HOUSE - इस परियोजना ने 40 देशों में 150 से अधिक बिंदुओं को देख ग्लास एकत्र किया। आप जल्दी से होस्ट, पिंग, ट्रेसरआउट और एमआरटी कमांड निष्पादित कर सकते हैं।