CSS ग्रिड की एक अन्य उपयोगी विशेषता ग्रिड वस्तुओं के बीच गटर (स्थान) बनाने की क्षमता है। इसलिए फ्लेक्सबॉक्स की तरह ग्रिड चिल्ड्रन में मार्जिन जोड़ने के बजाय, हम बस grip-gap:10px
सेट कर सकते हैं। ।
जब हम फ़ायरफ़ॉक्स ग्रिड इंस्पेक्टर को चालू करते हैं (यह वास्तव में बहुत बढ़िया है, अगर आपने इसे आज़माया नहीं है, तो) ग्रिड इस तरह दिखेगा:
हम अपने केंद्रित तीन कॉलम ग्रिड को स्पष्ट रूप से देख सकते हैं, लेकिन होम लिंक को अपनी पंक्ति में होना चाहिए। हम चाहते हैं कि यह चौड़ाई के तीन कॉलम लें।
में "पूर्ण-चौड़ाई" का एक वर्ग जोड़ेंगे। तत्व।
अपनी शैलियों में, हम .fullwidth
. देंगे ग्रिड-स्तंभ:1/4
. का शैली नियम चुनें . इससे वह ग्रिड चाइल्ड कॉलम पहली वर्टिकल ग्रिड लाइन पर शुरू होगा, और अंत में चौथी ग्रिडलाइन तक विस्तारित होगा।
यह ऐसा दिखाई देगा, और हमने लाइन नंबर चालू कर दिए हैं ताकि आप देख सकें कि उन्हें कैसे क्रमांकित किया गया है:
डेस्कटॉप के लिए ग्रिड शैलियाँ जोड़ें
डेस्कटॉप के लिए, हम चाहते हैं कि सभी लिंक एक पंक्ति में हों। और फिर से, हम चाहते हैं कि होम लिंक बाईं ओर हो, और फिर तीन अन्य लिंक दाईं ओर हों।
मैं अंतिम तीन स्तंभों में से प्रत्येक को उस सामग्री के आकार का बनाना चाहता हूं जिसमें वह शामिल है। यह सुनिश्चित करेगा कि लिंक के बीच समान मात्रा में स्थान है।
इसका मतलब यह है कि हमें मीडिया क्वेरी का उपयोग करके, बड़ी डिवाइस चौड़ाई के लिए ग्रिड टेम्पलेट को बदलना होगा।
तो हमें टेम्पलेट को किसमें बदलना चाहिए? हम एक ही पंक्ति में सभी लिंक चाहते हैं, इसलिए हम चार-स्तंभ ग्रिड चाहते हैं।
सही दिशा में सिर्फ एक कदम उठाने के लिए, आइए ग्रिड-टेम्पलेट-कॉलम
को बदलकर सेटिंग शुरू करें। repeat(3, 100px)
. से प्रॉपर्टी करने के लिए दोहराएँ(4, 100px)
ग्रिड पैरेंट पर 600px से अधिक चौड़ाई के लिए।
यह चार कॉलम बनाएगा, और फिर हम इसे ट्विक करना जारी रख सकते हैं।
साथ ही, आइए .fullwidth
. को अपडेट करें शैलियाँ इसलिए यह ग्रिड-कॉलम:1/2
सेट करके डेस्कटॉप पर केवल एक कॉलम लेता है . इससे वह पहला होम कॉलम केवल ग्रिड लाइन 1 से ग्रिड लाइन 2 तक विस्तारित होगा।
यहाँ हमारे पास अब तक क्या है:
लिंक चार कॉलम में हैं, लेकिन चूंकि वे सभी 100px चौड़े हैं, वे केवल पृष्ठ पर केंद्रित हैं।
पहले होम लिंक को पूरी तरह से बाईं ओर बनाने के लिए, हमें ग्रिड को पृष्ठ की चौड़ाई का 100% स्वयं बनाना होगा। और ऐसा करने के लिए, हम ग्रिड टेम्प्लेट के पहले कॉलम को किसी भी उपलब्ध स्थान पर बना सकते हैं।
इसलिए ग्रिड-टेम्पलेट-कॉलम
बदल रहे हैं से 1fr रिपीट(3, 100px)
तीन माध्यमिक लिंक को 100px चौड़ा छोड़ देगा। और पहला कॉलम बाकी जगह ले लेगा।
आइए देखें कि यह कैसा दिखता है:
वहाँ पर होना! हालांकि, अंतिम तीन स्तंभों को उनकी सामग्री जितना चौड़ा बनाने के लिए, हम fit-content()
का उपयोग करते हैं समारोह। अगर हम आखिरी तीन कॉलम को fit-content(50px)
. पर सेट करते हैं तब सामग्री को फिट करने के लिए कॉलम अलग-अलग आकार के होंगे।
तो हमारे ग्रिड-टेम्पलेट-कॉलम
डेस्कटॉप के लिए प्रॉपर्टी अब 1fr रिपीट(3, फिट-कंटेंट(50px))
. होगी ।
कॉलम की चौड़ाई अच्छी लगती है!
अब कॉलम में लिंक टेक्स्ट को संरेखित करने पर काम करते हैं। अभी वे औचित्य-आइटम:केंद्र
. के कारण केंद्रित हैं नियम जो हमने मोबाइल के लिए इस्तेमाल किया।
आइए इसे डेस्कटॉप के लिए जस्टिफाई-आइटम:एंड
. में बदलें लिंक को दाईं ओर संरेखित करने के लिए। फिर हम justify-self:start
. को सेट करके केवल होम लिंक को बाईं ओर संरेखित कर सकते हैं .fullwidth
. के लिए चयनकर्ता।
अब हम ग्रिड के लिए तैयार डेस्कटॉप नेविगेशन देख सकते हैं, और यह फ्लेक्सबॉक्स नेविगेशन से मेल खाता है:
फ्लेक्सबॉक्स या ग्रिड?
इस नेविगेशन के निर्माण में, फ्लेक्सबॉक्स शैलियों ने हमारे style.scss
में कोड की 46 पंक्तियाँ लीं। लिखने के लिए, और HTML मार्कअप थोड़ा अधिक जटिल था।
ग्रिड शैलियों ने लिखने के लिए कोड की एक पतली 24 पंक्तियाँ लीं! बहुत अंतर इसलिए था क्योंकि हमें मार्जिन-बॉटम
add जोड़ना था और मार्जिन-दाएं
फ्लेक्सबॉक्स पर आइटम के बीच स्थान जोड़ने के लिए स्टाइल नियम। और ग्रिड में ग्रिड-गैप
. के साथ सभी का ध्यान रखा गया था संपत्ति।
मैं व्यक्तिगत रूप से सीएसएस ग्रिड के लिए आवश्यक हल्के कोड को वास्तव में पसंद करता हूं। लेकिन अगर आप फ्लेक्सबॉक्स के साथ अधिक सहज हैं तो फ्लेक्सबॉक्स निश्चित रूप से एक अच्छा विकल्प है!
आप यहां कोडपेन पर सोर्स कोड देख सकते हैं।