बहुत ज़्यादा शब्द हैं, पढ़ा नहीं गया
अगर आपको Flexbox के बारे में जानकारी है, तो ग्रिड को भी जाना-पहचाना लगेगा. रेचल एंड्रयू, शुरू करने में आपकी मदद करने के लिए, सीएसएस ग्रिड के लिए एक शानदार वेबसाइट बनाते हैं. अब Google Chrome में ग्रिड उपलब्ध है.
क्या फ़्लेक्सबॉक्स है? ग्रिड?
पिछले कुछ सालों में, CSS Flexbox का बड़े पैमाने पर इस्तेमाल किया जा रहा है और ब्राउज़र से मिलने वाली सहायता काफ़ी अच्छी है. (अगर आप उन खराब लोगों में से एक नहीं हैं ��िन्हें IE9 और इससे पुराने वर्शन के साथ काम करना पड़ता है). Flexbox की मदद से, लेआउट के कई मुश्किल काम आसानी से किए जा सकते हैं. जैसे, एलिमेंट के बीच बराबर दूरी, सबसे ऊपर से नीचे वाले लेआउट या सीएसएस विज़र्डरी: वर्टिकल सेंटरिंग.
हालांकि, स्क्रीन पर आम तौर पर दूसरा डाइमेंशन मौजूद होता है, जिसके बारे में हमें चिंता करने की ज़रूरत होती है. अफ़सोस की बात है कि एलिमेंट के साइज़ पर ध्यान देने की ज़रूरत नहीं है. इसलिए, सिर्फ़ फ़्लेक्सबॉक्स का इस्तेमाल करके वर्टिकल और हॉरिज़ॉन्टल दोनों रिदम हासिल नहीं किए जा सकते. यहां पर CSS ग्रिड की मदद ली जाती है.
CSS ग्रिड को डेवलप किया जा रहा है. ज़्यादातर ब्राउज़र में इसे बनाने में पांच साल से भी ज़्यादा समय लगा है. साथ ही, इसे Flexbox के लॉन्च से बचने के लिए, इंटरऑपरेबिलिटी (दूसरे सिस्टम के साथ काम करना) पर ज़्यादा समय लगाया गया है. इसलिए अगर आप Chrome में अपना लेआउट लागू करने के लिए ग्रिड का इस्तेमाल करते हैं, तो हो सकता है कि आपको Firefox और Safari में भी वही नतीजा मिले. लिखने के समय, Microsoft में ग्रिड को लागू करने की प्रोसेस पुरानी हो चुकी है (जैसा कि IE11 में पहले से मौजूद था.) और इसे "विचार में है" पर अपडेट किया गया है.
कॉन्सेप्ट और सिंटैक्स में समानताएं होने के बा��जूद, फ़्लेक्सबॉक्स और ग्रिड को लेआउट की प्रतिस्पर्धी तकनीकों के तौर पर न देखें. ग्रिड दो डाइमेंशन में व्यवस्थित होता है, जबकि फ़्लेक्सबॉक्स एक डाइमेंशन में व्यवस्थित होता है. इन दोनों को एक साथ इस्तेमाल करने पर, सिनर्जी पैदा होती है.
ग्रिड तय करना
ग्रिड की अलग-अलग प्रॉपर्टी के बारे में जानने के लिए, मेरा सुझाव है कि रेचल एंड्रयू की Grid by Example या CSS Tricks की चीट शीट का इस्तेमाल करें. अगर आपको Flexbox के बारे में जानकारी है, तो कई प्रॉपर्टी और उनके मतलब के बारे में पता होना चाहिए.
आइए, 12 कॉलम वाले स्टैंडर्ड ग्रिड लेआउट पर नज़र डालते हैं. 12-कॉलम ���ाला क्लासिक लेआउट लोगों के बीच लोकप्रिय है, क्योंकि संख्या 12 को 2, 3, 4, और 6 से विभाजित किया जा सकता है. इसलिए, कई डिज़ाइन के लिए यह काम का होता है. आइए, इस लेआउट को लागू करते हैं:
चलिए, हमारे मार्कअप कोड से शुरुआत करते हैं:
<!DOCTYPE html>
<body>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</body>
अपनी स्टाइलशीट में हम अपने body को बड़ा करके शुरुआत करते हैं, ताकि इसमें पूरे व्यूपोर्ट को कवर किया जा सके और इसे ग्रिड कंटेनर में बदल दिया गया हो:
html, body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
}
अब हम सीएसएस ग्रिड का इस्तेमाल कर रहे हैं. बहुत बढ़िया!
अगले चरण में, ग्रिड की पंक्तियों और कॉलम को लागू किया जाता है. हम अपने मॉकअप में सभी 12 कॉलम लागू कर सकते हैं, लेकिन क्योंकि हम हर कॉलम का इस्तेमाल नहीं कर रहे हैं, इसलिए ऐसा करने से ह���ारी सीएसएस बेअसर हो जाएगी. आसानी के लिए, हम लेआउट को इस तरह लागू करेंगे:
हेडर और फ़ुटर की चौड़ाई अलग-अलग होती है और सामग्री दोनों डाइमेंशन में अलग-अलग होती है. नेविगेशन दोनों डाइमेंशन में भी अलग-अलग होगा, लेकिन हम इस पर कम से कम 200 पिक्सल चौड़ाई लागू करने जा रहे हैं. (क्यों? बेशक, आप सीएसएस ग्रिड की सुविधाओं को दिखाने के लिए.)
सीएसएस ग्रिड में, कॉलम और पंक्तियों के सेट को ट्रैक कहा जाता है. आइए, अपने पहले ट्रैक के सेट, लाइनों को तय करने से शुरुआत करते हैं:
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
grid-template-rows, अलग-अलग लाइन को तय करने वाले साइज़ का क्रम लेता है.
इस मामले में, हम पहली लाइन की ऊंचाई 150 पिक्सल और आखिरी की 100 पिक्सल की ऊंचाई सेट करते हैं.
बीच की लाइन auto पर सेट है. इसका मतलब है कि यह उस लाइन में ग्रिड कंटेनर (ग्रिड कंटेनर के चाइल्ड) को शामिल करने के लिए, ज़रूरी ऊंचाई के हिसाब से अडजस्ट हो जाएगी. हमारी बॉडी पूरे व्यूपोर्ट में फैली हुई है, इसलिए कॉन्टेंट वाला ट्रैक (ऊपर दी गई तस्वीर में पीला) कम से कम उपलब्ध जगह भर देगा, लेकिन ज़रूरत पड़ने पर वह बड़ा हो जाएगा (और दस्तावेज़ को स्क्रोल करेगा).
जिन कॉलम के लिए हम ज़्यादा डाइनैमिक तरीका अपनाना चाहते हैं: हम चाहते हैं कि नेविगेशन और कॉन्टेंट, दोनों का दायरा बढ़े (और छोटा हो), लेकिन हम चाहते हैं कि नेविगेशन का साइज़ 200 पिक्सल से कम न हो. साथ ही, हम चाहते हैं कि कॉन्टेंट का साइज़ नेविगेशन से ज़्यादा हो. Flexbox में, हम फ़्लेक्स-ग्रो और फ़्लेक्स-श्रिंक का इस्तेमाल करेंगे, लेकिन ग्रिड में यह कुछ अलग होता है:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
}
हम दो कॉलम तय कर रहे हैं. पहला कॉलम minmax() फ़ंक्शन का इस्तेमाल करके तय किया गया है, जिसमें दो वैल्यू होती हैं: उस ट्रैक का कम ��े कम और ज़्यादा से ज़्यादा साइज़.
(यह min-width और एक में max-width की तरह है.) जैसा कि हमने पहले बताया है,
चौड़ाई कम से कम 200 पिक्सल होनी चाहिए. ज़्यादा से ज़्यादा 3fr चौड़ाई होनी चाहिए. fr, ग्रिड के लिए बनी एक खास इकाई है. इसकी मदद से, ग्रिड एलिमेंट के लिए उपलब्ध जगह को बांटा जा सकता है.
fr शायद "फ़्रैक्शन यूनिट" का मतलब है, लेकिन इसका मतलब जल्द ही मुफ़्त यूनिट भी हो सकता है.
यहां हमारी वैल्यू का मतलब है कि दोनों कॉलम की चौड़ाई, स्क्रीन के हिसाब से भर जाएगी. हालांकि, कॉन्टेंट के कॉलम की चौड़ाई, नेविगेशन कॉलम की चौड़ाई से हमेशा तीन गुना ज़्यादा होगी. हालांकि, इसके लिए ज़रूरी है कि नेविगेशन कॉलम की चौड़ाई 200 पिक्सल से ज़्यादा हो.
हालांकि, हमारे ग्रिड आइटम का प्लेसमेंट अभी तक सही नहीं है, लेकिन पंक्तियों और कॉलम का साइज़ सही तरीके से काम करता है और वह व्यवहार दिखाता है जो हम चाहते थे:
आइटम जोड़ना
ग्रिड की सबसे अहम सुविधाओं में से एक है डीओएम ऑर्डर पर ध्यान दिए बिना आइटम को
रखना. (हालांकि, स्क्रीन रीडर, DOM पर नेविगेट करते हैं. इसलिए, हमारा सुझाव है कि आप
एलिमेंट को सही तरीके से ऐक्सेस करने के लिए, इस बात का ध्यान रखें कि एलिमेंट को फिर से क्रम में कैसे लगाया जाए.) अगर कोई मैन्युअल प्लेसमेंट नहीं किया गया है, तो एलिमेंट को ग्रिड में DOM के क्रम में रखा जाता है. हर एलिमेंट एक सेल का इस्तेमाल करता है. grid-auto-flow का इस्तेमाल करके, ग्रिड में भरे जाने का क्रम बदला जा सकता है.
एलिमेंट कैसे रखें? शायद ग्रिड आइटम को रखने का सबसे आसान तरीका यह है कि वे कौनसे कॉलम और पंक्तियां कवर करते हैं, यह तय करना. ऐसा करने के लिए ग्रिड में दो सिंटैक्स होते हैं: पह��े सिंटैक्स में, शुरू और एंड पॉइंट तय किए जाते हैं. दूसरे वाले हिस्से में, आपको स्टार्ट पॉइंट और स्पैन की जानकारी देनी होगी:
header {
grid-column: 1 / 3;
}
nav {
grid-row: 2 / span 2;
}
हम चाहते हैं कि हमारा हेडर पहले कॉलम से शुरू हो और तीसरे कॉलम से पहले खत्म हो. ���मारा नेविगेशन दूसरी पंक्ति से शुरू होना चाहिए और इसमें कुल दो पंक्तियां होनी चाहिए.
तकनीकी रूप से, हमने अपने लेआउट को लागू कर लिया है, लेकिन मैं आपको कुछ ऐसी सुविधाएं दिखाना चाहता हूं जो ग्रिड से आपको मिलती हैं, ताकि प्लेसमेंट को आसान बनाया जा सके. पहली सुविधा यह है कि आप अपने ट्रैक बॉर्डर को नाम दे सकते हैं और उन नामों का उपयोग प्लेसमेंट के लिए कर सकते हैं:
body {
display: grid;
grid-template-rows: 150px [nav-start] auto 100px [nav-end];
grid-template-columns: [header-start] minmax(200px, 3fr) 9fr [header-end];
}
header {
grid-column: header-start / header-end;
}
nav {
grid-row: nav-start / nav-end;
}
ऊपर दिया गया कोड, पहले वाले कोड जैसा ही लेआउट देगा.
अपने ग्रिड में सभी इलाकों को नाम देने की सुविधा और भी असरदार होती है:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
grid-template-areas: "header header"
"nav content"
"nav footer";
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
grid-template-areas, स्पेस से अलग किए गए नामों की स्ट्रिंग लेता है. इससे
डेवलपर, हर सेल को एक नाम दे सकता है. अगर आस-पास की दो सेल का नाम एक जैसा है,
तो उन्हें एक ही एरिया में जोड़ दिया जाएगा. इस तरह से अपने लेआउट कोड के लिए ज़्यादा सिमेंटिक्स दिए जा सकते हैं और मीडिया क्वेरी को ज़्यादा आसान बनाया जा सकता है. यह कोड पहले जैसा ही लेआउट जनरेट करेगा.
क्या और भी हैं?
हां, एक ही ब्लॉग पोस्ट में कई विषयों को शामिल नहीं किया जा सकता. रेचल एंड्रयू, जीडीई भी हैं. वे सीएसएस वर्किंग ग्रुप में एक आमंत्रित विशेषज्ञ हैं और ग्रिड डिज़ाइन को आसान बनाने के लिए, शुरुआत से ही उनके साथ काम कर रहे हैं. उन्होंने इस पर एक किताब भी लिखी थी. ग्रिड के बारे में जानने के लिए, उनकी वेबसाइट ग्रिड बाय उदाहरण एक अहम संसाधन है. बहुत से लोगों को लगता है कि ग्रिड, वेब डिज़ाइन के लिए एक क्रांतिकारी कदम है और अब यह Chrome में डिफ़ॉल्ट रूप से चालू है, इसलिए आप आज से ही इसका इस्तेमाल करना शुरू कर सकते हैं.