ब्राउज़र डिबगर में ग्रिड का प्रदर्शन

वेबसाइट लेआउट की प्रक्रिया में ग्रिड के साथ काम करते समय यह जांचने की आवश्यकता होती है कि ग्रिड में तत्वों का स्थान सही ढंग से हो रहा है या नहीं। इसके अलावा, यदि हमने कोई गलती की है तो हमें यह पता लगाना चाहिए कि किस तत्व से गलत प्लेसमेंट हो रहा है। इस उद्देश्य के लिए हम ब्राउज़र में डिबगर का उपयोग कर सकते हैं।

आइए Chrome ब्राउज़र में डिबगर के उदाहरण का उपयोग करके ग्रिड देखें। सबसे पहले हम अपनी रुचि की वस्तु का चयन करते हैं जिसमें ग्रिड है और राइट-क्लिक करके सूची से विकल्प 'Inspect' चुनते हैं:

अब ब्राउज़र के दाईं ओर खुले पैनल में हमारे ग्रिड वाले ऑब्जेक्ट पर होवर करें और ध्यान दें कि पैरेंट एलिमेंट के आगे वाली लाइन में बटन grid मौजूद है:

बटन grid पर क्लिक करने के बाद, हम देखेंगे कि हमारा ऑब्जेक्ट ग्रिड की दृश्यात्मक रूप से समझने योग्य प्रणाली में प्रदर्शित होता है, जिसमें सभी कॉलम और पंक्तियों की संख्यांकन दिखाया गया है:

अब डिबगर में पैनल पर ध्यान दें। इसमें टैब्स मौजूद हैं Styles, Computed, Layout आदि। डिफ़ॉल्ट रूप से एक्टिव टैब Styles से स्विच करके Layout टैब पर जाएं। आपको आपके ग्रिड की सेटिंग्स की एक सूची दिखाई देगी:

आइए प्रदर्शन के लिए पहला विकल्प Show track sizes चुनें, जो ट्रैक के आकार दिखाता है:

विकल्प Show area names की सहायता से ग्रिड के क्षेत्रों के नाम प्रदर्शित किए जा सकते हैं, यदि वे परिभाषित हैं। और विकल्प Extend grid lines चुनने पर हम ग्रिड की सीमाओं से आगे बढ़ी हुई ट्रैक लाइनें देखेंगे: