सीएसएस ग्रिड का इस्तेमाल करना

Alex Danilo

वेब ऐप्लिकेशन बनाते समय, सबसे पहले अपने ऐप्लिकेशन के कॉन्टेंट को व्यवस्थित करने का तरीका तय करना ज़रूरी होता है.

कई डिज़ाइनर, कॉन्टेंट को लेआउट करने के लिए काल्पनिक ग्रिड का इस्तेमाल करते हैं. भले ही, वह कॉन्टेंट किसी साइट या ऐप्लिकेशन के लिए हो. सीएसएस ग्रुप, लेआउट को आसान बनाने के लिए लगातार काम कर रहा है. इस काम के तहत, उसने सीएसएस ग्रिड लेआउट मॉड्यूल बनाया है, जो अब ब्राउज़र में दिखने लगा है.

यह सुविधा, एक्सपेरिमेंट के तौर पर उपलब्ध फ़्लैग की मदद से, Chrome में आज़माने के लिए उपलब्ध है. यह सुविधा, IE के वर्शन 10 से भी लागू है. साथ ही, जल्द ही ज़्यादातर ब्राउज़र में भी लागू हो सकती है.

कारोबार के बारे में कम शब्दों में बताने वाली खास जानकारी

  • सीएसएस ग्रिड लेआउट की मदद से, अपने लेआउट के लिए लाइनें और कॉलम तय किए जा सकते हैं
  • उपलब्ध जगह का इस्तेमाल करने के लिए, ग्रिड में बदलाव किया जा सकता है
  • कॉन्टेंट का क्रम, ग्रिड कंटेनर के डिसप्ले के क्रम से अलग हो सकता है
  • मीडिया क्वेरी के आधार पर लेआउट बदल सकते हैं, जिससे रिस्पॉन्सिव डिज़ाइन आसान हो जाता है
  • कॉन्टेंट ओवरलैप हो सकता है (अन्य तरीकों से ऐसा लेआउट चालू नहीं किया जा सकता)
  • ग्रिड लेआउट तेज़ी से काम करता है

यहां एक खास जानकारी वाला वीडियो दिया गया है, जिसमें सीएसएस ग्रिड लेआउट के काम करने के तरीके के बारे में बताया गया है. स्लाइड यहां हैं:

इसे आज़माएं

Chrome में सीएसएस ग्रिड लेआउट का इस्तेमाल करना अब आसान हो गया है. सबसे पहले, आपको एक्सपेरिमेंट के तौर पर उपलब्ध फ़्लैग को चालू करना होगा, ताकि यह सुविधा चालू की जा सके.

सबसे पहले, chrome://flags यूआरएल लोड करें. इसके बाद, नीचे की ओर स्क्रोल करके वेब प्लैटफ़ॉर्म की एक्सपेरिमेंटल सुविधाएं चालू करें विकल्प पर जाएं, जैसा कि यहां दिखाया गया है:

एक्सपेरिमेंट के तौर पर उपलब्ध फ़्लैग के विकल्प की इमेज

फ़्लैग को चालू करने के लिए, चालू करें पर क्लिक करें. इसके बाद, आपको ब्राउज़र को रीस्टार्ट करने का यह प्रॉम्प्ट दिखेगा:

'फिर से लॉन्च करें' बटन की इमेज

अब अपने ब्राउज़र को रीस्टार्ट करने के लिए, अभी फिर से लॉन्च करें बटन पर क्लिक करें. इसके बाद, सीएसएस ग्रिड लेआउट आज़माने के लिए तैयार हो जाएं.

हमें आपकी राय का इंतज़ार है

सीएसएस ग्रिड लेआउट, वेब कॉन्टेंट के लिए एक बेहतरीन नया प्राइमिटिव है. हालांकि, हम हमेशा की तरह यह जानना चाहते हैं कि डेवलपर इस बारे में क्या सोचते हैं. सुझाव/राय देने के कई तरीके हैं - यहां टिप्पणी करें, W3C सीएसएस वर्किंग ग्रुप की सूची में ईमेल भेजें. ईमेल की विषय लाइन में "[css-grid]" लिखें, गड़बड़ियों को लॉग करें या अपने विचारों को ब्लॉग और ट्वीट करें. हमें इस नई सुविधा की मदद से बनाए गए आपके बेहतरीन लेआउट देखने का इंतज़ार रहेगा.