ব্রাউজার ডিবাগারে গ্রিড প্রদর্শন
ওয়েবসাইট লেআউট করার প্রক্রিয়ায় গ্রিড নিয়ে কাজ করার সময় এটি পরীক্ষা করা প্রয়োজন হতে পারে যে গ্রিডে উপাদানগুলির স্থাপন সঠিকভাবে হচ্ছে কিনা। তাছাড়া, যদি আমাদের কোনো ভুল থেকে থাকে তাহলে আমাদের বুঝতে হবে কোন উপাদান থেকে ভুল স্থাপন করা হচ্ছে। এই উদ্দেশ্যে আমরা ব্রাউজারে ডিবাগার ব্যবহার করতে পারি।
চলুন Chrome ব্রাউজারের ডিবাগার ব্যবহার করে একটি গ্রিড দেখি।
প্রথমে আমরা আমাদের আগ্রহের গ্রিড অবজেক্টটি নির্বাচন করি
এবং রাইট-ক্লিক করে তালিকা থেকে
'Inspect' অপশনটি বেছে নিই:
এখন ব্রাউজারের ডান দিকে খোলা প্যানেলে
আমাদের গ্রিড অবজেক্টে কার্সার নিয়ে আসি এবং লক্ষ্য করি যে
প্যারেন্ট এলিমেন্টের পাশের লাইনে
grid বাটনটি রয়েছে:
grid বাটনে ক্লিক করার পরে, আমরা দেখতে পাব যে
আমাদের অবজেক্টটি দৃশ্যত বোধগম্য গ্রিড সিস্টেমে প্রদর্শিত হয়,
সমস্ত কলাম এবং সারির নম্বর সহ:
এখন ডিবাগারে প্যানেলটিতে মনোযোগ দিন।
এতে ট্যাব রয়েছে
Styles, Computed, Layout ইত্যাদি।
ডিফল্টরূপে সক্রিয়
Styles ট্যাব থেকে Layout ট্যাবে স্যুইচ করুন।
আপনি দেখতে পাবেন
আপনার গ্রিডের সেটিংসের তালিকা:
চলুন ট্র্যাকের আকার দেখায় এমন প্রথম
অপশন Show track sizes প্রদর্শনের জন্য নির্বাচন করি:
Show area names অপশন ব্যবহার করে
গ্রিডের এরিয়া নামগুলি প্রদর্শন করা যেতে পারে,
যদি সেগুলি নির্ধারণ করা থাকে। এবং Extend grid lines অপশনটি নির্বাচন করে
আমরা গ্রিডের সীমানার বাইরে প্রসারিত ট্র্যাক লাইনগুলি দেখতে পাব:
