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

एलेक्स डैनिलो

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

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

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

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

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

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

इसे आज़माएं

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

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

प्रयोग के तौर पर इस्तेमाल किए जा रहे फ़्लैग के विकल्प की इमेज

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

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

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

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

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