आज के ट्यूटोरियल में, हम HTML और CSS के साथ एक टॉप नेविगेशन बार बनाने जा रहे हैं। हम इसे बनाने के दो अलग-अलग तरीके देखेंगे, एक फ्लेक्सबॉक्स के साथ, और दूसरा CSS ग्रिड के साथ।
यह दोनों दृष्टिकोणों के बीच अंतर की तुलना करने का एक अच्छा तरीका होगा। और आप देख सकते हैं कि आपको कौन सी विधि बेहतर लगती है।
यहां तैयार नेविगेशन कैसा दिखेगा:
डेस्कटॉप पर, सभी लिंक एक ही पंक्ति में होंगे, बाएं तरफ Home, और दाएं तरफ अन्य लिंक।
फिर मोबाइल पर, हमारे पास शीर्ष पंक्ति पर Home होगा और अन्य लिंक नीचे की पंक्ति पर। और लिंक पेज पर केंद्रित होंगे।
आइए अपनी फ़ाइलें सेट करके शुरू करें।
फ़ाइलें सेट करें
अपना नेविगेशन बनाने के लिए हम एक index.html फ़ाइल और एक style.scss फ़ाइल बनाएंगे, जिसे हम VS Code Live Sass एक्सटेंशन का उपयोग करके style.css में कंपाइल करेंगे।
हमारे <head> अनुभाग में हम style.css फ़ाइल लोड करने के लिए एक <link> एलिमेंट जोड़ेंगे।
अब आइए उस नेविगेशन बार का निर्माण शुरू करें!
HTML मार्कअप बनाएं
हमारे index.html फ़ाइल में, आइए पहले नेविगेशन के लिए HTML मार्कअप बनाएं। मैं जितना संभव हो सके सिमेंटिक HTML टैग्स का उपयोग करने की कोशिश करता हूं, ताकि हर चीज के लिए केवल divs का उपयोग न करना पड़े।
हम एक <nav> एलिमेंट बनाने जा रहे हैं, जिसमें हमारे सभी नेविगेशन लिंक होंगे। फिर हम लिंक्स को एक अनऑर्डर्ड लिस्ट <ul> एलिमेंट में इस तरह रखेंगे:
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav>यह शुरू करने के लिए बेसिक नेविगेशन मार्कअप होगा। जैसे-जैसे हम फ्लेक्सबॉक्स और ग्रिड संस्करण बनाते हैं, हमें कुछ ट्विक्स करने होंगे, लेकिन आप शुरू करने के लिए इस <nav> एलिमेंट की दो कॉपी बना सकते हैं।
यदि हम ब्राउज़र में index.html लोड करते हैं, तो यह बहुत बेसिक दिखेगा।
लेकिन चिंता न करें! आइए अपने style.scss फ़ाइल में स्टाइल जोड़ना शुरू करें।
ग्लोबल स्टाइल और मीडिया क्वेरीज़ जोड़ना शुरू करें
सबसे पहले, मैं कुछ ग्लोबल स्टाइल जोड़ूंगा जिन्हें मैं हमेशा उपयोग करने की कोशिश करता हूं:
html { font-size: 100%; box-sizing: border-box; } body { margin: 0px; padding: 0px; min-height: 100vh; } *, *::before, *::after { box-sizing: inherit; }इसके अलावा, आइए रंगों को थोड़ा और दिलचस्प बनाएं। <body> टैग में हम background-color: #1b1b1b सेट करेंगे, और सभी एलिमेंट्स और <a> लिंक्स को color: #ffffff के साथ सफेद बनाएंगे ताकि यह डार्क थीम वाला हो।
फिर <nav> में <ul> एलिमेंट के लिए: list-style-type: none जोड़ें ताकि बुलेट्स छिप जाएं, और मार्जिन और पैडिंग को 0px पर सेट करें।
आइए <nav> एलिमेंट में भी कुछ पैडिंग जोड़ें padding: 10px के साथ, और मीडिया क्वेरी का उपयोग करके टैबलेट और डेस्कटॉप स्टाइल के लिए पैडिंग बढ़ाएं:
nav { padding: 10px; @media (min-width: 600px){ padding: 20px; } }चीजें बेहतर दिख रही हैं! डिफ़ॉल्ट सेरिफ़ फ़ॉन्ट के बजाय, मैं गूगल फ़ॉन्ट Open Sans का उपयोग करना चाहूंगा।
हम style.scss के बहुत ऊपर इस लाइन को जोड़कर फ़ॉन्ट फ़ैमिली को इम्पोर्ट कर सकते हैं:
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); अब हमारे <body> एलिमेंट के स्टाइल में, हम Open Sans या बैकअप फ़ॉन्ट लोड करने के लिए font-family: 'Open Sans', Arial, Helvetica, sans-serif सेट कर सकते हैं।
लिंक स्टाइल को लीनियर-ग्रेडिएंट बॉटम बॉर्डर के साथ जोड़ें
आइए लिंक स्टाइल को भी थोड़ा और दिलचस्प बनाएं।
हम <a> एलिमेंट्स पर text-decoration: none सेट करके डिफ़ॉल्ट अंडरलाइन को हटाने जा रहे हैं। और मैं इसे एक मोटी गुलाबी अंडरलाइन से बदलना चाहूंगा, border-bottom का उपयोग करके। मैं होवर पर गुलाबी से बैंगनी रंग में एक ग्रेडिएंट अंडरलाइन भी बनाने जा रहा हूं।
रंगों के लिए, मुझे Sass वेरिएबल्स बनाना पसंद है। style.scss फ़ाइल के शीर्ष पर @import स्टेटमेंट के तहत, निम्नलिखित वेरिएबल्स जोड़ें:
$linkPink: rgb(216, 29, 216); $linkPurple: rgb(98, 16, 250);वेरिएबल्स का उपयोग करना इसे सरल बना देगा जब हम उन रंगों को अपने अन्य स्टाइल में जोड़ रहे हों।
अब, मोटी अंडरलाइन बनाने के लिए, हम <a> टैग के एक स्यूडो-एलिमेंट का उपयोग कर सकते हैं ताकि एक बॉटम बॉर्डर हो।
उसके लिए कोड यहां है:
a { position: relative; text-decoration: none; } a::before { content: ""; position: absolute; height: 3px; right: 0px; bottom: -3px; left: 0px; background-color: $linkPink; }यहां क्या हो रहा है कि हम ::before स्यूडो-एलिमेंट को 3px लंबा और गुलाबी बैकग्राउंड के साथ बना रहे हैं। इसे नीचे स्थित करने के लिए, हमें इसे position: absolute पर सेट करने की आवश्यकता है और सुनिश्चित करें कि <a> एलिमेंट में position: relative है ताकि यह पेज पर ऊपर न उड़ जाए। (मैं इस घटना के बारे में यहां अधिक बताता हूं।)
फिर, स्यूडो-एलिमेंट को टेक्स्ट के नीचे स्थित करने के लिए, हम bottom: -3px सेट कर रहे हैं ताकि लिंक टेक्स्ट और लाइन के बीच थोड़ी जगह हो। और लाइन को लिंक की पूरी चौड़ाई तक फैलाने के लिए, हम left: 0px और right: 0px का उपयोग कर रहे हैं।
अब लिंक थोड़े बेहतर दिखते हैं!
लीनियर ग्रेडिएंट होवर स्टाइल
आइए एक कदम और आगे बढ़ें और एक कूल होवर इफेक्ट जोड़ें। हम चाहते हैं कि अंडरलाइन गुलाबी से बैंगनी ग्रेडिएंट में बदल जाए, और लिंक टेक्स्ट होवर करने पर सफेद से गुलाबी हो जाए।
इसे करने के लिए, हम निम्नलिखित स्टाइल के साथ a:hover सेलेक्टर का उपयोग करेंगे:
a:hover { color: $linkPink; &::before { background: linear-gradient(to right, $linkPink 40%, $linkPurple 75%); } }::before स्यूडो-एलिमेंट के लिए, बैकग्राउंड अब linear-gradient में बदल जाएगा। ग्रेडिएंट फ़ंक्शन में, हम इसे बाएं से दाएं जाते हुए गुलाबी से बैंगनी में बदलने के लिए कह रहे हैं।
और हम प्रतिशत के साथ नियंत्रित कर रहे हैं कि ग्रेडिएंट कहां बदलता है। हम चाहते हैं कि पहला गुलाबी रंग 0% (सबसे बाएं) से 40% चौड़ाई तक जाए। और हम चाहते हैं कि दूसरा बैंगनी रंग 100% (सबसे दाएं) से 75% चौड़ाई तक जाए। फिर एलिमेंट की चौड़ाई के 40% और 75% के बीच एक ग्रेडिएंट होगा।
हमने होवर पर लिंक टेक्स्ट रंग को गुलाबी में भी बदल दिया है।
तो अब जब आप किसी लिंक पर होवर करेंगे तो यह इस तरह दिखेगा:
थोड़ा फैंसी लगता है ना?
ठीक है, अब हमने उन ग्लोबल स्टाइल को समाप्त कर लिया है जिनका उपयोग हम फ्लेक्सबॉक्स और ग्रिड दोनों नेविगेशन बार के लिए करेंगे।
आइए फ्लेक्सबॉक्स नेविगेशन के लिए स्टाइल लिखना शुरू करें।
फ्लेक्सबॉक्स नेविगेशन
लिंक्स को फ्लेक्स चाइल्ड ग्रुप्स में विभाजित करें
मैं आमतौर पर पहले डेस्कटॉप स्टाइल लिखकर शुरू करता हूं, फिर मोबाइल। क्योंकि डेस्कटॉप आमतौर पर कई कॉलम के साथ अधिक जटिल होता है, जबकि मोबाइल पर चीजें एक कॉलम में स्टैक होती हैं। लेकिन आप अपने स्टाइल को जिस क्रम में लिखना चाहें लिख सकते हैं।
हमारे डेस्कटॉप नेविगेशन में, हम चाहते हैं कि Home लिंक बाईं ओर हो, और अन्य तीन सेकेंडरी लिंक एक साथ दाईं ओर हों।
फ्लेक्सबॉक्स के साथ ऐसा करने के लिए, हमें लिंक्स को दो ग्रुप्स में विभाजित करना होगा: एक बाईं ओर लिंक्स के लिए, और दूसरा दाईं ओर लिंक्स के लिए। दोनों ग्रुप्स फिर फ्लेक्स पैरेंट के फ्लेक्स चाइल्ड एलिमेंट होंगे।
हमारे HTML मार्कअप पर वापस जाएं, हम चाहते हैं कि <nav> एलिमेंट फ्लेक्स पैरेंट हो। तो आइए Home लिंक को <ul> से बाहर निकालें और इसे <nav> एलिमेंट का सीधा चाइल्ड बनाएं।
बाकी लिंक <ul> के अंदर रहेंगे।
आइए अपने फ्लेक्सबॉक्स स्टाइल को बाद में ग्रिड स्टाइल से अलग रखने के लिए <nav> में "flexbox" क्लास भी जोड़ें।
अपडेटेड मार्कअप इस तरह दिखेगा:
<nav class="flexbox"> <a href="#">Home</a> <ul> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav>डेस्कटॉप के लिए फ्लेक्सबॉक्स स्टाइल जोड़ें
अब, हमारे नेविगेशन में, हम nav.flexbox एलिमेंट को display: flex पर सेट करके फ्लेक्सबॉक्स चालू करना चाहते हैं। फिर हम पहले ग्रुप को बाईं ओर और दूसरे ग्रुप को दाईं ओर रखने के लिए justify-content: space-between नियम भी जोड़ेंगे।
<ul> को display: flex के साथ एक और फ्लेक्स पैरेंट बनाएं और लिंक्स को दाईं ओर संरेखित करने के लिए justify-content: flex-end का उपयोग करें। और हम फ्लेक्स चाइल्ड एलिमेंट्स को लंबवत केंद्रित करने के लिए align-items: center; जोड़ेंगे।
बेहतर दिख रहा है!
अब, हम चाहते हैं कि तीन सेकेंडरी लिंक भी फ्लेक्सबॉक्स व्यवस्था में एक-दूसरे के बगल में हों। तो हम <ul> एलिमेंट को तीन लिंक्स का फ्लेक्स पैरेंट बनाएंगे, और align-items: center भी सेट करेंगे। हम लिंक्स के बीच जगह भी जोड़ना चाहते हैं, इसलिए हम margin-right: 20px जोड़ेंगे लेकिन इसे :last-child सेलेक्टर के लिए 0px बना देंगे। यह सुनिश्चित करता है कि अंतिम लिंक में अतिरिक्त जगह न हो।
हमारे डेस्कटॉप स्टाइल अब इस तरह दिखेंगे:
nav.flexbox { display: flex; justify-content: space-between; align-items: center; ul { display: flex; align-items: center; } ul li { margin-right: 20px; &:last-child { margin-right: 0px; } } }और नेविगेशन बार इस तरह दिखेगा:
मोबाइल के लिए फ्लेक्सबॉक्स स्टाइल जोड़ें
अब आइए मोबाइल स्टाइल जोड़ें। सबसे पहले, आइए मोबाइल पर फ्लेक्स कंटेंट को केंद्रित करें।
अभी मोबाइल पर, Home लिंक justify-content: space-between नियम के कारण फ्लेक्स पैरेंट एलिमेंट के लिए बाईं ओर संरेखित है।
हम उस स्टाइल नियम को बड़े विड्थ के लिए मीडिया क्वेरी में ले जाकर इसे केंद्रित कर सकते हैं। फिर मोबाइल के लिए justify-content को center पर सेट करें।
इसके बाद, हम चाहते हैं कि तीन सेकेंडरी लिंक एक नई पंक्ति पर रैप हों, तो आइए nav.flexbox सेलेक्टर पर flex-wrap: wrap जोड़कर रैपिंग सक्षम करें।
स्टाइल तब इस तरह दिखने चाहिए:
nav.flexbox { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; @media (min-width: 600px){ justify-content: space-between; } }और रैपिंग को बाध्य करने के लिए, हम <ul> फ्लेक्स चाइल्ड को 100% चौड़ाई लेने जा रहे हैं, ताकि यह केवल Home लिंक के नीचे जाकर फिट हो सके।
मुझे हेल्पर क्लासेस उपयोग करना पसंद है, इसलिए हम <ul> एलिमेंट में "fullwidth" क्लास जोड़ रहे हैं, और अपने nav.flexbox नियम में .fullwidth सेलेक्टर के लिए कुछ स्टाइल नियम बना रहे हैं।
सबसे पहले हम flex: 1 0 100% सेट करेंगे। यह flex प्रॉपर्टी तीन फ्लेक्स प्रॉपर्टीज़ के लिए शॉर्टहैंड है: flex-grow, flex-shrink, flex-basis।
हम flex-grow के 1 के साथ इसे आवश्यकता पड़ने पर बढ़ने की अनुमति दे रहे हैं। और हम flex-shrink के 0 के साथ इसे सिकुड़ने की अनुमति नहीं दे रहे हैं। फिर हम डिफ़ॉल्ट चौड़ाई को 100% पर सेट कर रहे हैं flex-basis का उपयोग करके।
हम मोबाइल पर फ्लेक्स पैरेंट में लिंक्स को केंद्रित भी करने जा रहे हैं, इसलिए हम justify-content: center जोड़ेंगे।
हालांकि, हम टैबलेट या डेस्कटॉप के लिए सेकेंडरी लिंक्स को फुलविड्थ और केंद्रित नहीं चाहते। बड़े डिवाइस विड्थ के लिए, हम चाहते हैं कि flex प्रॉपर्टी 0 1 auto हो ताकि यह बढ़े नहीं, जरूरत पड़ने पर सिकुड़ सके, और डिफ़ॉल्ट चौड़ाई कंटेंट की प्राकृतिक चौड़ाई जो भी हो।
आइए डेस्कटॉप स्टाइल के लिए एक मीडिया क्वेरी जोड़ें:
.fullwidth { flex: 1 0 100%; justify-content: center; @media (min-width: 600px){ flex: 0 1 auto; } }मैं उन पहले स्टाइल नियमों को केवल मोबाइल के लिए लक्षित करने के लिए max-width मीडिया क्वेरी भी लिख सकता था। लेकिन मैं मोबाइल स्टाइल नियमों को डिफ़ॉल्ट के रूप में उपयोग करने की कोशिश करता हूं, और फिर संघर्षों से बचने के लिए बड़े min-width मीडिया क्वेरी को उत्तरोत्तर जोड़ता हूं।
यह वास्तव में आप पर निर्भर करता है कि आप किस प्रकार की मीडिया क्वेरी का उपयोग करते हैं, लेकिन मैं ज्यादातर समय एक प्रकार (min या max) का उपयोग करने की सलाह देता हूं।
इसके अलावा, तीन सेकेंडरी लिंक्स के लिए, मैं उनकी चौड़ाई सेट करना चाहूंगा ताकि "Blog" टेक्स्ट "Home" लिंक के नीचे केंद्रित हो। अभी यह दूसरी पंक्ति के लिंक्स की कुल चौड़ाई के आधार पर केंद्रित है। लेकिन क्योंकि "Contact" "About" से थोड़ा लंबा है, पंक्ति का केंद्र "Blog" टेक्स्ट के केंद्र से थोड़ा दाएं है।
इसे ठीक करने के लिए, हम दूसरी पंक्ति में प्रत्येक फ्लेक्स चाइल्ड कॉलम को 100px की समान स्थिर चौड़ाई देंगे। तो हम flex प्रॉपर्टी को 0 0 100px पर सेट करेंगे और टेक्स्ट को केंद्रित करेंगे। हम केवल उन नियमों को मोबाइल के लिए चाहते हैं, इसलिए हम डेस्कटॉप के लिए उन्हें flex को 0 0 auto पर सेट करके रद्द कर देंगे।
आइए मोबाइल के लिए आइटम्स के बीच की जगह को 10px तक कम करें, और यह डेस्कटॉप विड्थ के लिए 20px पर रहेगा।
यह सब कोड इस तरह दिखेगा:
ul li { flex: 0 0 100px; margin-right: 10px; text-align: center; @media (min-width: 600px){ flex: 0 0 auto; margin-right: 20px; } &:last-child { margin-right: 0px; } }आखिरी ट्विक जो हम करेंगे वह है मोबाइल के लिए पहले Home लिंक और तीन सेकेंडरी लिंक्स के बीच कुछ जगह जोड़ना margin-bottom के साथ। हम <a> एलिमेंट को लक्षित करने वाला एक स्टाइल नियम लिखेंगे जो nav.flexbox पैरेंट का सीधा चाइल्ड है, ताकि केवल Home लिंक प्रभावित हो:
nav.flexbox { > a { margin-bottom: 10px; @media (min-width: 600px){ margin-bottom: 0px; } } }यहां मोबाइल नेविगेशन कैसा दिखेगा, Firefox फ्लेक्सबॉक्स इंस्पेक्टर चालू है, ताकि आप प्रत्येक कॉलम के लिए लाइनें देख सकें:
और यह फ्लेक्सबॉक्स नेविगेशन के लिए है! अब आइए केवल CSS ग्रिड का उपयोग करके इसे बनाने पर आगे बढ़ें।
CSS ग्रिड विधि
फ्लेक्सबॉक्स और ग्रिड के बीच मुख्य अंतरों में से एक यह है कि फ्लेक्सबॉक्स के साथ, कॉलम और पंक्तियों की व्यवस्था फ्लेक्स चाइल्ड एलिमेंट्स पर सेट फ्लेक्स प्रॉपर्टीज़ द्वारा निर्धारित की जाती है flex प्रॉपर्टी में, और फ्लेक्स पैरेंट रैप पर सेट है या नहीं। तो आप कह सकते हैं कि फ्लेक्सबॉक्स एक "कंटेंट-फर्स्ट" दृष्टिकोण का पालन करता है।
CSS ग्रिड के साथ, यह एक "ग्रिड-फर्स्ट" दृष्टिकोण है। आप ग्रिड प्रॉपर्टीज़ का उपयोग करके पैरेंट एलिमेंट में अपने ग्रिड टेम्पलेट (यानी कॉलम और पंक्तियों) को डिज़ाइन करते हैं। और आप उस ग्रिड टेम्पलेट में ग्रिड चाइल्ड एलिमेंट्स को व्यक्तिगत रूप से नियंत्रित कर सकते हैं कि वे कहां रखे गए हैं।
नियंत्रण के इस व्यक्तिगत स्तर के कारण, हमारे CSS ग्रिड नेविगेशन बार में, हम पहले Home लिंक सहित सभी लिंक्स को उसी पैरेंट <ul> में रख सकते हैं।
<nav class="grid"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav>मोबाइल के लिए ग्रिड स्टाइल जोड़ें
आइए अपने ग्रिड नेविगेशन के साथ चीजों को बदलें और पहले मोबाइल स्टाइल लिखकर शुरू करें!
मोबाइल पर, हम चाहते हैं कि Home लिंक पहली पंक्ति पर हो, 100% चौड़ाई लेते हुए। फिर हम चाहते हैं कि तीन सेकेंडरी लिंक दूसरी पंक्ति पर हों, और केंद्रित हों।
हमारे <ul> ग्रिड पैरेंट एलिमेंट में, हम display: grid सेट करके ग्रिड चालू करेंगे।
अब, आइए अपना ग्रिड टेम्पलेट डिज़ाइन करें। चूंकि दूसरी पंक्ति पर तीन लिंक होंगे, आइए तीन-कॉलम टेम्पलेट बनाएं।
मैं कॉलम को सभी समान चौड़ाई का बनाना चाहूंगा, लेकिन मैं नहीं चाहता कि वे बहुत चौड़े हों। तो आइए <ul> ग्रिड पैरेंट पर grid-template-columns: repeat(3, 100px) सेट करें।
हम तीन 100px चौड़ाई के कॉलम बनाने के लिए repeat() फ़ंक्शन का उपयोग कर रहे हैं।
CSS ग्रिड की एक और उपयोगी विशेषता ग्रिड आइटम्स के बीच गटर (जगह) बनाने की क्षमता है। इसलिए फ्लेक्सबॉक्स की तरह ग्रिड चाइल्ड पर मार्जिन जोड़ने के बजाय, हम बस grid-gap: 10px सेट कर सकते हैं।
हम justify-content: center के साथ पूरे ग्रिड को पेज पर केंद्रित भी कर सकते हैं, और justify-items: center के साथ प्रत्येक कॉलम में टेक्स्ट को केंद्रित कर सकते हैं।
जब हम Firefox ग्रिड इंस्पेक्टर चालू करते हैं (यह वास्तव में बहुत बढ़िया है, यदि आपने इसे नहीं आजमाया है, तो वैसे) ग्रिड इस तरह दिखेगा:
हम स्पष्ट रूप से अपना केंद्रित तीन-कॉलम ग्रिड देख सकते हैं, लेकिन Home लिंक को अपनी पंक्ति पर होना चाहिए। हम चाहते हैं कि यह तीन कॉलम की चौड़ाई ले।
इसे करने के लिए, हम फिर से एक हेल्पर क्लास का उपयोग करेंगे, Home <li> एलिमेंट में "fullwidth" क्लास जोड़कर।
हमारे स्टाइल में, हम .fullwidth सेलेक्टर को grid-column: 1 / 4 का स्टाइल नियम देंगे। यह उस ग्रिड चाइल्ड कॉलम को पहली वर्टिकल ग्रिड लाइन से शुरू करके चौथी ग्रिडलाइन तक अंत तक विस्तारित करेगा।
यह इस तरह दिखेगा, और हमने लाइन नंबर चालू किए हैं ताकि आप देख सकें कि वे कैसे नंबर किए गए हैं:
डेस्कटॉप के लिए ग्रिड स्टाइल जोड़ें
डेस्कटॉप के लिए, हम चाहते हैं कि सभी लिंक एक पंक्ति पर हों। और फिर से, हम चाहते हैं कि Home लिंक बाईं ओर हो, और फिर तीन अन्य लिंक दाईं ओर हों।
मैं यह भी चाहूंगा कि अंतिम तीन कॉलम में से प्रत्येक उस कंटेंट के आकार का हो जो वे रखते हैं। यह सुनिश्चित करेगा कि लिंक्स के बीच समान मात्रा में जगह हो।
इस सब का मतलब है कि हमें मीडिया क्वेरी का उपयोग करके बड़े डिवाइस विड्थ के लिए ग्रिड टेम्पलेट बदलना होगा।
तो हमें टेम्पलेट को क्या बदलना चाहिए? हम सभी लिंक्स को एक ही पंक्ति पर चाहते हैं, इसलिए हम चार-कॉलम ग्रिड चाहेंगे।
सही दिशा में एक कदम उठाने के लिए, आइए शुरू में grid-template-columns प्रॉपर्टी को repeat(3, 100px) से repeat(4, 100px) पर बदलकर ग्रिड पैरेंट पर 600px से अधिक विड्थ के लिए सेट करें।
यह चार कॉलम बनाएगा, और फिर हम इसे आगे ट्विक कर सकते हैं।
साथ ही, आइए .fullwidth स्टाइल को अपडेट करें ताकि यह डेस्कटॉप पर केवल एक कॉलम ले, grid-column: 1 / 2 सेट करके। यह उस पहले Home कॉलम को केवल ग्रिड लाइन 1 से ग्रिड लाइन 2 तक विस्तारित करेगा।
यहां हमारे पास अभी तक क्या है:
लिंक्स चार कॉलम में हैं, लेकिन चूंकि वे सभी 100px चौड़े हैं, वे बस पेज पर केंद्रित हैं।
पहले Home लिंक को पूरी तरह से बाईं ओर करने के लिए, हमें ग्रिड को पेज की चौड़ाई का 100% लेने की आवश्यकता है। और ऐसा करने के लिए, हम ग्रिड टेम्पलेट में केवल पहले कॉलम को उपलब्ध किसी भी स्थान को लेने दे सकते हैं।
तो grid-template-columns को 1fr repeat(3, 100px) पर बदलने से तीन सेकेंडरी लिंक 100px चौड़े रहेंगे। और पहला कॉलम बाकी जगह ले लेगा।
आइए देखें कि यह कैसा दिखता है:
पहुंच रहे हैं! हालांकि, अंतिम तीन कॉलम को केवल उनके कंटेंट जितना चौड़ा बनाने के लिए, हम fit-content() फ़ंक्शन का उपयोग करते हैं। यदि हम अंतिम तीन कॉलम को fit-content(50px) पर सेट करते हैं तो कॉलम व्यक्तिगत रूप से कंटेंट को फिट करने के लिए आकार लेंगे।
तो डेस्कटॉप के लिए हमारा grid-template-columns प्रॉपर्टी अब 1fr repeat(3, fit-content(50px)) होगा।
कॉलम चौड़ाई अच्छी दिख रही है!
अब आइए कॉलम में लिंक टेक्स्ट को संरेखित करने पर काम करें। अभी वे justify-items: center नियम के कारण केंद्रित हैं जिसे हमने मोबाइल के लिए उपयोग किया था।
आइए इसे डेस्कटॉप के लिए justify-items: end पर बदलें ताकि लिंक्स को दाईं ओर संरेखित किया जा सके। फिर हम केवल Home लिंक को justify-self: start सेट करके .fullwidth सेलेक्टर के लिए बाईं ओर संरेखित कर सकते हैं।
अब हम ग्रिड के लिए तैयार डेस्कटॉप नेविगेशन देख सकते हैं, और यह फ्लेक्सबॉक्स नेविगेशन से मेल खाता है:
फ्लेक्सबॉक्स या ग्रिड?
इस नेविगेशन को बनाने में, फ्लेक्सबॉक्स स्टाइल को हमारे style.scss में लिखने में 46 लाइन कोड लगे, और HTML मार्कअप थोड़ा अधिक जटिल था।
ग्रिड स्टाइल को लिखने में केवल 24 लाइन कोड लगे! बहुत सारा अंतर इसलिए था क्योंकि हमें फ्लेक्सबॉक्स पर आइटम्स के बीच जगह जोड़ने के लिए margin-bottom और margin-right स्टाइल नियम जोड़ने पड़े। और ग्रिड में वह सब grid-gap प्रॉपर्टी के साथ संभाला गया था।
मैं व्यक्तिगत रूप से CSS ग्रिड के लिए आवश्यक हल्के कोड को वास्तव में पसंद करता हूं। लेकिन फ्लेक्सबॉक्स अभी भी निश्चित रूप से एक अच्छा विकल्प है यदि आप फ्लेक्सबॉक्स के साथ अधिक सहज हैं!
आप सोर्स कोड यहां Codepen पर देख सकते हैं।
