कम शब्दों में कहा जाए तो
अगर आपको Flexbox के बारे में जानकारी है, तो ग्रिड को भी जाना-पहचाना लगेगा. रेचल एंड्रयू, शुरू करने में आपकी मदद करने के लिए, सीएसएस ग्रिड के लिए एक शानदार वेबसाइट बनाते हैं. अब Google Chrome में ग्रिड उपलब्ध है.
क्या फ़्लेक्सबॉक्स है? ग्रिड?
पिछले कुछ सालों में, CSS Flexbox का इस्तेमाल काफ़ी बढ़ गया है और ब्राउज़र के साथ काम करने की सुविधा काफ़ी अच्छी है. हालांकि, यह सुविधा IE9 और उससे पहले के वर्शन के साथ काम नहीं करती. Flexbox की मदद से, लेआउट के कई मुश्किल काम आसानी से किए जा सकते हैं. जैसे, एलिमेंट के बीच बराबर दूरी, सबसे ऊपर से नीचे वाले लेआउट या सीएसएस विज़र्डरी: वर्टिकल सेंटरिंग.
हालांकि, आम तौर पर स्क्रीन का एक दूसरा डाइमेंशन होता है, जिस पर हमें ध्यान देने की ज़रूरत होती है. माफ़ करें, सिर्फ़ फ़्लेक्सबॉक्स का इस्तेमाल करके, वर्टिकल और हॉरिज़ॉन्टल दोनों ताल को एक साथ नहीं बनाया जा सकता. इसके लिए, आपको एलिमेंट का साइज़ खुद तय करना होगा. ऐसे में, सीएसएस ग्रिड की मदद ली जा सकती है.
सीएसएस ग्रिड को पांच साल से ज़्यादा समय से डेवलप किया जा रहा है. इसे ज़्यादातर ब्राउज़र में फ़्लैग के पीछे रखा गया है. साथ ही, Flexbox की तरह गड़बड़ियों के साथ लॉन्च होने से बचने के लिए, इंटरऑपरेबिलिटी पर ज़्यादा समय बिताया गया है. इसलिए अगर आप Chrome में अपना लेआउट लागू करने के लिए ग्रिड का इस्तेमाल करते हैं, तो हो सकता है कि आपको Firefox और Safari में भी वही नतीजा मिले. लेख लिखने के समय, Microsoft Edge में ग्रिड लागू करने का तरीका पुराना है. यह वही तरीका है जो पहले से IE11 में मौजूद था. इस अपडेट को "विचारा जा रहा है".
कॉन्सेप्ट और सिंटैक्स में समानता होने के बावजूद, Flexbox और Grid को एक-दूसरे से अलग लेआउट तकनीक के तौर पर न देखें. ग्रिड दो डाइमेंशन में व्यवस्थित होता है, जबकि Flexbox एक डाइमेंशन में लेआउट करता है. दोनों को एक साथ इस्तेमाल करने पर, बेहतर नतीजे मिलते हैं.
ग्रिड तय करना
ग्रिड की अलग-अलग प्रॉपर्टी के बारे में जानने के लिए, मेरा सुझाव है कि रेचल एंड्रयू की 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 में, हम flex-grow और flex-shrink का इस्तेमाल करते हैं. हालांकि, Grid में यह थोड़ा अलग होता है:
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 पिक्सल से ज़्यादा चौड़ा हो.
हमारे ग्रिड आइटम का प्लेसमेंट अब तक सही नहीं है. हालांकि, पंक्तियों और कॉलम का साइज़ सही है और हमें वह व्यवहार मिल रहा है जिसे हम चाहते थे:
आइटम जोड़ना
ग्रिड की सबसे बेहतरीन सुविधाओं में से एक यह है कि इसमें आइटम को डीओएम के क्रम के बिना भी रखा जा सकता है. (हालांकि, स्क्रीन रीडर डीओएम पर नेविगेट करते हैं. इसलिए, हमारा सुझाव है कि एलिमेंट को सही तरीके से ऐक्सेस करने के लिए, आपको यह ध्यान रखना चाहिए कि आपने उन्हें किस क्रम में रखा है.) अगर मैन्युअल तरीके से प्लेसमेंट नहीं किया जाता है, तो एलिमेंट को ग्रिड में डीओएम के क्रम में रखा जाता है. साथ ही, उन्हें बाएं से दाएं और ऊपर से नीचे के क्रम में व्यवस्थित किया जाता है. हर एलिमेंट एक सेल में होता है. ग्रिड में डेटा भरने के क्रम को बदलने के लिए, 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, स्पेस से अलग किए गए नामों की स्ट्रिंग लेता है. इससे डेवलपर, हर सेल को नाम दे सकता है. अगर आस-पास की दो सेल का नाम एक जैसा है, तो उन्हें एक ही एरिया में जोड़ दिया जाएगा. इस तरह, अपने लेआउट कोड में ज़्यादा सेमैंटिक्स दिए जा सकते हैं और मीडिया क्वेरी को ज़्यादा आसान बनाया जा सकता है. यह कोड पहले जैसा ही लेआउट जनरेट करेगा.
क्या कुछ और है?
हां, हां, एक ब्लॉग पोस्ट में बहुत कुछ शामिल नहीं किया जा सकता. रेचल एंड्रयू, GDE हैं. साथ ही, वे सीएसएस वर्किंग ग्रुप में, न्योते पर बुलाए गए विशेषज्ञ हैं. वे शुरुआत से ही इस ग्रुप के साथ काम कर रही हैं, ताकि यह पक्का किया जा सके कि ग्रिड की मदद से वेब डिज़ाइन करना आसान हो. उन्होंने इस बारे में एक किताब भी लिखी है. ग्रिड के बारे में जानने के लिए, उनकी वेबसाइट Grid By Example एक अहम संसाधन है. कई लोगों का मानना है कि ग्रिड, वेब डिज़ाइन के लिए एक क्रांतिकारी कदम है. अब यह Chrome में डिफ़ॉल्ट रूप से चालू है, ताकि आप इसका इस्तेमाल आज ही शुरू कर सकें.