बहुत ज़्यादा शब्द हैं, पढ़ा नहीं गया
अगर आप Flexbox के बारे में जानते हैं, तो Grid को जाना-पहचाना लग सकता है. रेचल एंड्रू, CSS Grid के लिए एक खास वेबसाइट बनाते हैं, ताकि आप इसे शुरू कर सकें. ग्रिड अब Google Chrome में उपलब्ध है.
फ़्लेक्सबॉक्स? ग्रिड?
पिछले कुछ सालों से, CSS Flexbox का काफ़ी इस्तेमाल किया जा रहा है और ब्राउज़र के लिए सहायता बहुत अच्छी दिख रही है. अगर आप उन गरीब लोगों में से हैं जिन्हें IE9 और इससे पहले के वर्शन पर काम करना पड़ता है. Flexbox ने लेआउट के कई मुश्किल कामों को आसान बना दिया है. जैसे, एलिमेंट के बीच बराबर दूरी की स्पेसिंग, सबसे ऊपर से नीचे वाले लेआउट या सीएसएस के जादूगर: वर्टिकल सेंटरिंग.
वैसे, स्क्रीन पर आम तौर पर दूसरा डाइमेंशन भी होता है जिसके बारे में हमें चिंता करने की ज़रूरत है. अफ़सोस की बात यह है कि एलिमेंट का साइज़ बदलने का तरीका सिर्फ़ फ़्लेक्सबॉक्स इस्तेमाल करके, आपके पास वर्टिकल और हॉरिज़ॉन्टल रिदम दोनों नहीं हो सकते. ऐसे में CSS Grid से मदद मिलती है.
ज़्यादातर ब्राउज़र में पांच साल से भी ज़्यादा समय से CSS Grid पर काम किया जा रहा है. हमने इंटरऑपरेबिलिटी पर ज़्यादा समय बिताया, ताकि Flexbox की तरह के बगी लॉन्च से बचा जा सके. इसलिए, अगर Chrome में अपना लेआउट लागू करने के लिए 'ग्रिड' का इस्तेमाल किया जाता है, तो हो सकता है कि आपको Firefox और Safari में भी वही नतीजा मिले. हालांकि, Microsoft ने 'ग्रिड' को लागू करने के तरीके को बदल दिया है (जैसा कि IE11 में पहले से मौजूद था.) और अपडेट को "समीक्षा में है" पर सेट किया गया है.
कॉन्सेप्ट और सिंटैक्स में समानता होने के बावजूद, Flexbox और Grid को प्रतिस्पर्धी लेआउट तकनीकों की तरह न मानें. ग्रिड दो डाइमेंशन में व्यवस्थित होता है, जबकि Flexbox एक डाइमेंशन में व्यवस्थित होता है. दोनों को एक साथ इस्तेमाल करने पर तालमेल दिखता है.
ग्रिड के बारे में जानकारी
Grid की अलग-अलग विशेषताओं के बारे में जानने के लिए, मेरा सुझाव है कि Rachel Android की Grid By Example या CSS Tricks C कॉन्टेंट शीट का इस्तेमाल करें. अगर आपको 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 पिक्सल चौड़ाई लागू करने जा रहे हैं. (क्यों? सीएसएस ग्रिड की सुविधाएं दिखाने के लिए, बेशक कुछ ऐसा ही किया जा सकता है.)
CSS ग्रिड में, कॉलम और पंक्तियों के सेट को ट्रैक कहा जाता है. चलिए, ट्रैक के अपने पहले सेट, यानी कि लाइन के बारे में बताते हैं:
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
grid-template-rows में साइज़ का एक क्रम होता है, जो अलग-अलग पंक्तियों को तय करता है.
इस मामले में, हम पहली पंक्ति की ऊंचाई 150 पिक्सल और आखिरी लाइन को 100 पिक्सल की देते हैं.
बीच की पंक्ति को auto पर सेट किया गया है. इसका मतलब है कि यह उस पंक्ति में ग्रिड आइटम (ग्रिड कंटेनर के बच्चे) में फ़िट होने के लिए, ज़रूरी ऊंचाई के हिसाब से बदलाव करेगी. हमारा मुख्य भाग पूरे व्यूपोर्ट पर फैला हुआ है, इसलिए कॉन्टेंट (ऊपर दी गई तस्वीर में पीला) वाला ट्रैक कम से कम उपलब्ध जगह को भर देगा. अगर ज़रूरी हुआ, तो यह बड़ा हो जाएगा (और दस्तावेज़ को स्क्रोल करने लगेगा).
जिन कॉलम के लिए हम ज़्यादा डाइनैमिक तरीके अपनाना चाहते हैं: हम चाहते हैं कि नेविगेशन और कॉन्टेंट, दोनों बढ़ाएं और कम हों, लेकिन हम चाहते हैं कि नेविगेशन कभी भी 200 पिक्सल से कम न हो. साथ ही, हम चाहते हैं कि कॉन्टेंट, नेविगेशन से बड़ा हो. Flexbox में, हम flex-grow और flex-shrink का इस्तेमाल करेंगे, लेकिन ग्रिड में यह थोड़ा अलग है:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
}
हम दो कॉलम तय कर रहे हैं. पहला कॉलम minmax() फ़ंक्शन का उपयोग करके तय किया जाता है, जिसमें दो वैल्यू होती हैं: उस ट्रैक का कम से कम और ज़्यादा से ज़्यादा साइज़.
(यह एक में min-width और max-width की तरह है.) जैसा कि हमने पहले चर्चा की थी, सबसे कम चौड़ाई 200px है. ज़्यादा से ज़्यादा 3fr चौड़ाई होनी चाहिए. fr, खास तौर पर ग्रिड के लिए बनाई गई यूनिट है. इसकी मदद से, ग्रिड एलिमेंट के लिए उपलब्ध जगह को बांटा जा सकता है.
आम तौर पर, fr का मतलब "फ़्रैक्शन यूनिट" होता है, लेकिन इसका मतलब जल्द ही फ़्री यूनिट भी हो सकता है.
यहां दी गई वैल्यू का मतलब है कि स्क्रीन को भरने के लिए दोनों कॉलम बड़े होंगे. हालांकि, कॉन्टेंट कॉलम की चौड़ाई हमेशा नेविगेशन कॉलम की चौड़ाई से तीन गुना होगी. बशर्ते,
नेविगेशन कॉलम की चौड़ाई 200 पिक्सल से ज़्यादा हो.
हालांकि, हमारे ग्रिड आइटम का प्लेसमेंट अभी तक सही नहीं है, लेकिन पंक्तियों और कॉलम का साइज़ सही तरीके से काम करता है. इससे हमें उम्मीद के मुताबिक नतीजे मिलते हैं:
आइटम रखने के तरीके
ग्रिड की सबसे बेहतरीन सुविधाओं में से एक यह है कि डीओएम क्रम पर ध्यान दिए बिना, आइटम डाले जा सकते हैं. स्क्रीन रीडर, डीओएम को नेविगेट करते हैं. इसलिए, हमारा सुझाव है कि उन्हें ठीक से ऐक्सेस करने के लिए, एलिमेंट को फिर से क्रम में लगाने का ध्यान रखें. अगर कोई मैन्युअल प्लेसमेंट नहीं किया जाता है, तो एलिमेंट को ग्रिड में 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, स्पेस से अलग किए गए नामों की स्ट्रिंग लेता है. इससे डेवलपर हर सेल को एक नाम दे सकता है. अगर पास के दो सेल के नाम एक ही हैं,
तो उन्हें एक ही एरिया में ले जाया जाएगा. इस तरह से लेआउट कोड में ज़्यादा सिमेंटिक जोड़े जा सकते हैं और मीडिया क्वेरी को ज़्यादा आसान बनाया जा सकता है. ध्यान दें, यह कोड पहले जैसा लेआउट जनरेट करेगा.
क्या और भी बहुत कुछ है?
हाँ, हाँ इतना ही नहीं, लेकिन एक ही ब्लॉग में शामिल करने के लिए बहुत कुछ है. रेचल एंड्रू, GDE भी हैं. वे सीएसएस वर्किंग ग्रुप में आमंत्रित विशेषज्ञ हैं. ग्रिड से वेब डिज़ाइन को आसान बनाने के लिए, शुरुआत से ही उनके साथ मिलकर काम किया जा रहा है. उन्होंने इस पर एक किताब भी लिखी. ग्रिड के बारे में जानने के लिए, उनकी वेबसाइट ग्रिड बाय उदाहरण, एक अहम संसाधन है. कई लोगों को लगता है कि ग्रिड, वेब डिज़ाइन के लिए एक क्रांतिकारी कदम है. अब यह Chrome में डिफ़ॉल्ट रूप से चालू है, ताकि आप आज से ही इसका इस्तेमाल शुरू कर सकें.