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