आज के ट्यूटोरियल में, हम HTML और CSS के साथ एक शीर्ष नेविगेशन बार बनाने जा रहे हैं। हम इस नावबार को बनाने के दो अलग-अलग तरीकों को देखेंगे, एक तरीका फ्लेक्सबॉक्स के साथ, और दूसरा सीएसएस ग्रिड के साथ।
यह दो दृष्टिकोणों के बीच के अंतरों की तुलना करने का एक अच्छा तरीका होगा। और आप देख सकते हैं कि आपको कौन सा तरीका बेहतर लगता है।
यहां बताया गया है कि तैयार नेविगेशन कैसा दिखेगा:
डेस्कटॉप पर, सभी लिंक एक ही पंक्ति में होंगे, बाईं ओर होम और दाईं ओर अन्य लिंक होंगे।
फिर मोबाइल पर, हमारे पास शीर्ष पंक्ति पर होम होगा और नीचे की पंक्ति पर अन्य लिंक होंगे। और लिंक पेज पर केंद्रित होंगे।
आइए अपनी फ़ाइलें सेट करके शुरू करें।
फ़ाइलें सेट करें
अपना नेविगेशन बनाने के लिए हम एक index.html बनाने जा रहे हैं फ़ाइल और एक style.scss फ़ाइल, जिसे हम style.css में संकलित करेंगे वीएस कोड लाइव सैस एक्सटेंशन का उपयोग करना।
हमारे . में अनुभाग में हम एक जोड़ेंगे style.css लोड करने के लिए तत्व फ़ाइल।
चलिए अब उस नेविगेशन बार को बनाना शुरू करते हैं!
HTML मार्कअप बनाएं
हमारे index.html . में फ़ाइल, आइए पहले नेविगेशन के लिए HTML मार्कअप बनाएं। मैं हर चीज के लिए सिर्फ divs का उपयोग करने से बचने के लिए, जितना संभव हो सके अर्थपूर्ण HTML टैग्स का उपयोग करने का प्रयास करता हूं।
हम एक बनाने जा रहे हैं तत्व, जिसमें हमारे सभी नेविगेशन लिंक होंगे। फिर हम लिंक को एक अनियंत्रित सूची में डाल देंगे
<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>
यह आरंभ करने के लिए मूल नेविगेशन मार्कअप होगा। फ्लेक्सबॉक्स और ग्रिड संस्करण बनाते समय हमें कुछ बदलाव करने होंगे, लेकिन आप इसकी केवल दो प्रतियां बनाकर शुरू कर सकते हैं तत्व।
अगर हम 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;
}
इसके अलावा, आइए रंगों को थोड़ा और दिलचस्प बनाते हैं। . में टैग हम सेट करेंगे पृष्ठभूमि-रंग:#1b1b1b , और सुनिश्चित करें कि सभी तत्व और लिंक सफेद रंग के होते हैं रंग:#ffffff इसलिए यह गहरे रंग की थीम वाली है।
फिर . में तत्व , :जोड़ें सूची-शैली-प्रकार:कोई नहीं गोलियों को छिपाने के लिए, और मार्जिन और पैडिंग को 0px . पर सेट करें ।
आइए . में कुछ पैडिंग भी जोड़ें पैडिंग के साथ तत्व:10px , और मीडिया क्वेरी का उपयोग करके टैबलेट और डेस्कटॉप शैलियों के लिए पैडिंग बढ़ाएं:
nav {
padding: 10px;
@media (min-width: 600px){
padding: 20px;
}
}चीजें बेहतर दिख रही हैं! डिफ़ॉल्ट सेरिफ़ फ़ॉन्ट के बजाय, मैं एक Google फ़ॉन्ट, ओपन सैंस का उपयोग करना चाहूँगा।
हम फ़ॉन्ट परिवार को अपने style.scss . में आयात कर सकते हैं इस लाइन को सबसे ऊपर जोड़कर:
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
अब . के लिए हमारी शैली में तत्व, हम सेट कर सकते हैं ओपन सैंस या बैकअप फॉन्ट लोड करने के लिए।
रैखिक-ग्रेडिएंट बॉटम बॉर्डर वाली लिंक शैलियां जोड़ें
आइए लिंक शैलियों को भी थोड़ा और दिलचस्प बनाते हैं।
हम टेक्स्ट-डेकोरेशन:कोई नहीं . सेट करके डिफ़ॉल्ट अंडरलाइन को हटाने जा रहे हैं करने के लिए तत्व और मैं बॉर्डर-बॉटम का उपयोग करके इसे एक मोटी गुलाबी रेखांकन से बदलना चाहता/चाहती हूं . मैं होवर पर गुलाबी से बैंगनी रंग में एक ग्रेडिएंट अंडरलाइन भी बनाने जा रहा हूं।
रंगों के लिए, मुझे Sass चर बनाना पसंद है। style.scss के शीर्ष पर @import . के अंतर्गत फ़ाइल कथन, निम्नलिखित चर जोड़ें:
$linkPink: rgb(216, 29, 216);
$linkPurple: rgb(98, 16, 250);जब हम अपनी अन्य शैलियों में रंग जोड़ रहे हैं तो चरों का उपयोग करना आसान बना देगा।
अब, मोटा रेखांकन बनाने के लिए, हम के छद्म-तत्व का उपयोग कर सकते हैं नीचे की सीमा के लिए टैग करें।
उसके लिए यह कोड है:
a {
position: relative;
text-decoration: none;
}
a::before {
content: "";
position: absolute;
height: 3px;
right: 0px;
bottom: -3px;
left: 0px;
background-color: $linkPink;
}
यहाँ क्या हो रहा है कि हम ::before . बना रहे हैं छद्म तत्व 3px लंबा और गुलाबी पृष्ठभूमि के साथ। इसे सबसे नीचे स्थित करने के लिए, हमें इसे स्थिति:पूर्ण . पर सेट करना होगा और सुनिश्चित करें कि तत्व में स्थिति:सापेक्ष . है इसलिए यह पृष्ठ पर नहीं उड़ता है। (मैं यहां इस घटना के बारे में अधिक बताता हूं।)
फिर, छद्म तत्व को टेक्स्ट के नीचे रखने के लिए, हम नीचे:-3px सेट कर रहे हैं इसलिए लिंक टेक्स्ट और लाइन के बीच में ही थोड़ी सी जगह है। और लाइन को लिंक की पूरी चौड़ाई बढ़ाने के लिए, हम उपयोग कर रहे हैं बाएं:0px और दाएं:0px ।
अब लिंक्स कुछ अच्छे लगते हैं!
रैखिक ग्रेडिएंट होवर शैली
आइए एक और स्तर की कल्पना करें और एक अच्छा होवर प्रभाव जोड़ें। हम चाहते हैं कि अंडरलाइन गुलाबी से बैंगनी रंग के ग्रेडिएंट में बदल जाए, और जब आप किसी लिंक पर होवर करते हैं तो लिंक टेक्स्ट सफेद से गुलाबी हो जाता है।
ऐसा करने के लिए, हम a:hover . का उपयोग करेंगे निम्नलिखित शैलियों के साथ चयनकर्ता:
a:hover {
color: $linkPink;
&::before {
background: linear-gradient(to right, $linkPink 40%, $linkPurple 75%);
}
}
::before . के लिए छद्म-तत्व, पृष्ठभूमि अब एक रैखिक-ढाल में बदल जाएगी . ग्रेडिएंट फ़ंक्शन में, हम इसे बाएं से दाएं जाने पर गुलाबी से बैंगनी रंग में बदलने के लिए कह रहे हैं।
और हम नियंत्रित कर रहे हैं कि प्रतिशत के साथ ग्रेडिएंट कहां बदलता है। हम चाहते हैं कि पहला गुलाबी रंग 0% (दूर बाएं) से 40% चौड़ाई तक जाए। और हम चाहते हैं कि दूसरा बैंगनी रंग 100% (दूर दाएं) से 75% चौड़ाई तक जाए। फिर एलीमेंट की चौड़ाई के 40% और 75% के बीच एक ग्रेडिएंट होगा।
हमने लिंक टेक्स्ट के रंग को भी होवर पर गुलाबी रंग में बदल दिया है।
तो अब जब आप किसी लिंक पर होवर करेंगे तो यह इस तरह दिखेगा:
अधिक फैंसी लग रहा है, है ना?
ठीक है, अब हमने वैश्विक शैलियों को पूरा कर लिया है जिनका उपयोग हम फ्लेक्सबॉक्स और ग्रिड नेविगेशन बार दोनों के लिए करेंगे।
आइए फ्लेक्सबॉक्स नेविगेशन के लिए शैलियों को लिखना शुरू करें।
फ्लेक्सबॉक्स नेविगेशन
लिंक को फ्लेक्स चाइल्ड समूहों में विभाजित करें
मैं आमतौर पर पहले डेस्कटॉप शैलियों को लिखकर शुरू करता हूं, और फिर मोबाइल पर। क्योंकि डेस्कटॉप आमतौर पर कई कॉलम के साथ अधिक जटिल होता है, जबकि मोबाइल पर चीजें एक कॉलम में ढेर हो जाती हैं। लेकिन आप अपनी शैलियों को उस क्रम में लिख सकते हैं जो आपके लिए उपयुक्त हो।
हमारे डेस्कटॉप नेविगेशन में, हम चाहते हैं कि होम लिंक बाईं ओर हो, और अन्य तीन माध्यमिक लिंक एक साथ दाईं ओर हों।
फ्लेक्सबॉक्स के साथ ऐसा करने के लिए, हमें लिंक को दो समूहों में विभाजित करना होगा:एक बाईं ओर के लिंक के लिए, और दूसरा दाईं ओर के लिंक के लिए। फिर दोनों समूह फ्लेक्स पैरेंट के फ्लेक्स चाइल्ड एलिमेंट होंगे।
अपने HTML मार्कअप पर वापस जाते हुए, हम चाहते हैं कि फ्लेक्स पैरेंट होने के लिए तत्व। तो चलिए होम लिंक को . का सीधा बच्चा बनाएं तत्व।
फिर बाकी के लिंक
आइए . में एक "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>डेस्कटॉप के लिए flexbox शैलियां जोड़ें
अब, हमारे नेविगेशन में, हम nav.flexbox . सेट करके फ्लेक्सबॉक्स चालू करना चाहते हैं तत्व होना चाहिए डिस्प्ले:फ्लेक्स . फिर हम नियम भी जोड़ेंगे जस्टिफाई-कंटेंट:स्पेस-बीच पहले समूह को बाईं ओर और दूसरे समूह को दाईं ओर रखने के लिए।
डिस्प्ले:flex . के साथ एक और फ्लेक्स पैरेंट और जस्टिफाई-कंटेंट:फ्लेक्स-एंड का उपयोग करें लिंक को दाईं ओर संरेखित करने के लिए। और हम जोड़ देंगे संरेखित-आइटम:केंद्र; फ्लेक्स चाइल्ड तत्वों को लंबवत रूप से केन्द्रित करने के लिए।
बेहतर दिख रहे हैं!
अब, हम चाहते हैं कि फ्लेक्सबॉक्स व्यवस्था में तीन माध्यमिक लिंक भी एक दूसरे के बगल में हों। तो हम संरेखण-आइटम:केंद्र . भी सेट करें . हम लिंक्स के बीच स्पेस भी जोड़ना चाहते हैं, इसलिए हम मार्जिन-राइट: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;
}
}
}और नेविगेशन बार इस तरह दिखेगा:
मोबाइल के लिए flexbox शैलियां जोड़ें
अब मोबाइल शैलियाँ जोड़ते हैं। सबसे पहले, मोबाइल पर फ्लेक्स सामग्री को केन्द्रित करें।
अभी मोबाइल पर, होम लिंक जस्टिफाई-कंटेंट:स्पेस-बीच के कारण बाईं ओर संरेखित है फ्लेक्स मूल तत्व के लिए नियम।
हम उस शैली नियम को बड़ी चौड़ाई के लिए मीडिया क्वेरी में स्थानांतरित करके इसे केंद्रित कर सकते हैं। फिर जस्टिफाई-कंटेंट सेट करना केंद्र . के लिए मोबाइल के लिए।
इसके बाद, हम चाहते हैं कि तीन द्वितीयक लिंक एक नई पंक्ति में रैप करें, तो चलिए flex-wrap:Wrap जोड़ते हैं nav.flexbox . पर रैपिंग सक्षम करने के लिए चयनकर्ता।
तब शैलियों को इस तरह दिखना चाहिए:
nav.flexbox {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
@media (min-width: 600px){
justify-content: space-between;
}
}
और रैपिंग को बाध्य करने के लिए, हम
मुझे सहायक वर्गों का उपयोग करना पसंद है, इसलिए हम .fullwidth . के लिए कुछ शैली नियम बनाना हमारे nav.flexbox . में चयनकर्ता नियम।
सबसे पहले हम flex:1 0 100% . सेट करेंगे . यह फ्लेक्स संपत्ति तीन फ्लेक्स गुणों के लिए आशुलिपि है:flex-grow , फ्लेक्स-सिकुड़ , फ्लेक्स-आधार ।
यदि आवश्यक हो तो हम flex-grow . के साथ इसे बढ़ने दे रहे हैं 1. और हम इसे flex-srink . के साथ सिकुड़ने नहीं दे रहे हैं 0 का। फिर हम flex-base . का उपयोग करके डिफ़ॉल्ट चौड़ाई को 100% पर सेट कर रहे हैं ।
हम मोबाइल पर फ्लेक्स पैरेंट में लिंक को भी केन्द्रित करने जा रहे हैं, इसलिए हम जस्टिफाई-कंटेंट:सेंटर जोड़ेंगे ।
हालांकि, हम नहीं चाहते कि सेकेंडरी लिंक पूरी चौड़ाई वाले हों और टैबलेट या डेस्कटॉप के लिए केंद्रित हों। डिवाइस की बड़ी चौड़ाई के लिए, हम flex . चाहते हैं संपत्ति 0 1 ऑटो होना चाहिए इसलिए यह नहीं बढ़ेगा, यदि आवश्यक हो तो यह सिकुड़ सकता है, और डिफ़ॉल्ट चौड़ाई वही होगी जो सामग्री की प्राकृतिक चौड़ाई है।
आइए डेस्कटॉप शैलियों के लिए एक मीडिया क्वेरी जोड़ें:
.fullwidth {
flex: 1 0 100%;
justify-content: center;
@media (min-width: 600px){
flex: 0 1 auto;
}
}
मैं एक अधिकतम-चौड़ाई भी लिख सकता था केवल मोबाइल के लिए उन पहले स्टाइल नियमों को लक्षित करने के लिए मीडिया क्वेरी। लेकिन मैं मोबाइल शैली के नियमों को डिफ़ॉल्ट के रूप में उपयोग करने का प्रयास करता हूं, और फिर उत्तरोत्तर बड़ा न्यूनतम-चौड़ाई adding जोड़ रहा हूं संघर्षों से बचने के लिए मीडिया के प्रश्न।
यह वास्तव में आप पर निर्भर करता है कि आप किस प्रकार के मीडिया प्रश्नों का उपयोग करते हैं, लेकिन मैं अधिकांश समय उपयोग करने के लिए एक प्रकार (न्यूनतम या अधिकतम) चुनने की सलाह देता हूं।
साथ ही, तीन माध्यमिक लिंक के लिए, मैं उनकी चौड़ाई निर्धारित करना चाहता हूं ताकि "ब्लॉग" टेक्स्ट "होम" लिंक के नीचे केंद्रित हो। अभी यह दूसरी पंक्ति के लिंक की कुल चौड़ाई के आधार पर केंद्रित है। लेकिन चूंकि "संपर्क" "अबाउट" से थोड़ा लंबा है, इसलिए पंक्ति का केंद्र "ब्लॉग" टेक्स्ट के केंद्र के दाईं ओर थोड़ा सा है।
इसे ठीक करने के लिए, हम दूसरी पंक्ति में प्रत्येक फ्लेक्स चाइल्ड कॉलम को 100px की समान स्थिर चौड़ाई बनाएंगे। इसलिए हम एक फ्लेक्स सेट करेंगे संपत्ति से 0 0 100px और पाठ को केंद्र में रखें। हम केवल मोबाइल के लिए वे नियम चाहते हैं, इसलिए हम उन्हें flex . सेट करके डेस्कटॉप के लिए रद्द कर देंगे करने के लिए 0 0 ऑटो ।
आइए मोबाइल के लिए आइटम के बीच के स्थान को भी घटाकर 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;
}
}
आखिरी बदलाव जो हम करेंगे, वह है पहले होम लिंक और मार्जिन-बॉटम के साथ तीन सेकेंडरी लिंक के बीच कुछ जगह जोड़ना। मोबाइल के लिए। हम . को लक्षित करते हुए एक शैली नियम लिखेंगे तत्व जो nav.flexbox . का प्रत्यक्ष चाइल्ड है माता-पिता, इसलिए केवल होम लिंक प्रभावित होगा:
nav.flexbox {
> a {
margin-bottom: 10px;
@media (min-width: 600px){
margin-bottom: 0px;
}
}
}यहां बताया गया है कि मोबाइल नेविगेशन कैसा दिखेगा, फ़ायरफ़ॉक्स फ्लेक्सबॉक्स इंस्पेक्टर चालू होने पर, ताकि आप प्रत्येक कॉलम के लिए लाइनें देख सकें:
और यह फ्लेक्सबॉक्स नेविगेशन के लिए है! आइए अब केवल CSS ग्रिड का उपयोग करके इसे बनाने के लिए आगे बढ़ते हैं।
CSS ग्रिड विधि
फ्लेक्सबॉक्स और ग्रिड के बीच मुख्य अंतरों में से एक यह है कि फ्लेक्सबॉक्स के साथ, कॉलम और पंक्तियों की व्यवस्था फ्लेक्स में फ्लेक्स चाइल्ड तत्वों पर सेट फ्लेक्स गुणों द्वारा निर्धारित की जाती है। संपत्ति, और क्या फ्लेक्स पैरेंट रैप करने के लिए सेट है या नहीं। तो आप कह सकते हैं कि फ्लेक्सबॉक्स "सामग्री-प्रथम" दृष्टिकोण का अनुसरण करता है।
CSS ग्रिड के साथ, यह "ग्रिड-प्रथम" दृष्टिकोण है। आप मूल तत्व में ग्रिड गुणों का उपयोग करके अपना ग्रिड टेम्पलेट (अर्थात् कॉलम और पंक्तियाँ) डिज़ाइन करते हैं। और आप व्यक्तिगत रूप से नियंत्रित कर सकते हैं कि उस ग्रिड टेम्पलेट में ग्रिड चाइल्ड तत्व कहाँ रखे गए हैं।
नियंत्रण के इस व्यक्तिगत स्तर के कारण, हमारे सीएसएस ग्रिड नेविगेशन बार में, हम पहले होम लिंक सहित सभी लिंक को एक ही पैरेंट में रख सकते हैं
<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>मोबाइल के लिए ग्रिड शैलियाँ जोड़ें
आइए इसे हमारे ग्रिड नेविगेशन के साथ बदलें और पहले मोबाइल शैलियों को लिखकर शुरू करें!
मोबाइल पर, हम चाहते हैं कि होम लिंक पहली पंक्ति में हो, जिसकी चौड़ाई 100% हो। फिर हम चाहते हैं कि तीन माध्यमिक लिंक दूसरी पंक्ति में हों, और केंद्रित हों।
हमारे डिस्प्ले:ग्रिड . सेट करके ग्रिड चालू करेंगे ।
अब, हमारे ग्रिड टेम्पलेट को डिज़ाइन करते हैं। चूंकि दूसरी पंक्ति में तीन लिंक होंगे, आइए एक तीन-स्तंभ टेम्पलेट बनाएं।
मैं सभी स्तंभों को समान चौड़ाई में बनाना चाहता हूं, लेकिन मैं नहीं चाहता कि वे बहुत चौड़े हों। तो चलिए सेट करते हैं ग्रिड-टेम्पलेट-कॉलम:रिपीट(3, 100px)
हम repeat() . का उपयोग कर रहे हैं 100px चौड़ाई के तीन कॉलम बनाने के लिए कार्य करता है।
CSS ग्रिड की एक अन्य उपयोगी विशेषता ग्रिड वस्तुओं के बीच गटर (स्थान) बनाने की क्षमता है। इसलिए फ्लेक्सबॉक्स की तरह ग्रिड चिल्ड्रन में मार्जिन जोड़ने के बजाय, हम बस grip-gap:10px सेट कर सकते हैं। ।
हम पूरे ग्रिड को justify-content:center . के साथ पेज पर भी केन्द्रित कर सकते हैं , और प्रत्येक कॉलम में टेक्स्ट को justify-items:center . के साथ केन्द्रित करें ।
जब हम फ़ायरफ़ॉक्स ग्रिड इंस्पेक्टर को चालू करते हैं (यह वास्तव में बहुत बढ़िया है, अगर आपने इसे आज़माया नहीं है, तो) ग्रिड इस तरह दिखेगा:
हम अपने केंद्रित तीन कॉलम ग्रिड को स्पष्ट रूप से देख सकते हैं, लेकिन होम लिंक को अपनी पंक्ति में होना चाहिए। हम चाहते हैं कि यह चौड़ाई के तीन कॉलम लें।
ऐसा करने के लिए, हम फिर से एक सहायक वर्ग का उपयोग करेंगे, होम में "पूर्ण-चौड़ाई" का एक वर्ग जोड़ेंगे। तत्व।
अपनी शैलियों में, हम .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 जोड़ना था और मार्जिन-दाएं फ्लेक्सबॉक्स पर आइटम के बीच स्थान जोड़ने के लिए स्टाइल नियम। और ग्रिड में ग्रिड-गैप . के साथ सभी का ध्यान रखा गया था संपत्ति।
मैं व्यक्तिगत रूप से सीएसएस ग्रिड के लिए आवश्यक हल्के कोड को वास्तव में पसंद करता हूं। लेकिन अगर आप फ्लेक्सबॉक्स के साथ अधिक सहज हैं तो फ्लेक्सबॉक्स निश्चित रूप से एक अच्छा विकल्प है!
आप यहां कोडपेन पर सोर्स कोड देख सकते हैं।