Grid/Flex Visualizer একটি ওয়েবপেজে প্রতিটি CSS Grid এবং Flexbox কন্টেইনার শনাক্ত করে এবং সরাসরি পেজের ওপর রঙিন ওভারলে হিসেবে তাদের লেআউট স্ট্রাকচার রেন্ডার করে। গ্রিড লাইন, ট্র্যাক সাইজ, গ্যাপ ভ্যালু, ফ্লেক্স ডিরেকশন, অ্যালাইনমেন্ট অ্যাক্সিস এবং চাইল্ড এলিমেন্টের সাইজিং সবই দেখুন — কোনো DevTools খোলা ছাড়াই।
CSS Grid এবং Flexbox হলো আধুনিক ওয়েব লেআউটের ভিত্তি, কিন্তু এগুলো ডিফল্টভাবে অদৃশ্য থাকে। আপনি শুধু পেজটি দেখে গ্রিড লাইন, ফ্লেক্স অ্যাক্সিস বা গ্যাপ ভ্যালু দেখতে পাবেন না। ব্রাউজার DevTools কিছু গ্রিড ওভারলে ফিচার প্রদান করে, কিন্তু তার জন্য আপনাকে প্রথমে Elements প্যানেলে কন্টেইনারটি খুঁজে বের করতে হয়, ম্যানুয়ালি ওভারলে সক্রিয় করতে হয় এবং এটি একবারে কেবল একটি কন্টেইনারই দেখায়। Grid/Flex Visualizer এই পুরো প্রক্রিয়াটিকে অটোমেটেড করে — এটি পেজটি স্ক্যান করে প্রতিটি Grid এবং Flex কন্টেইনার খুঁজে বের করে এবং ভিজ্যুয়াল ওভারলে হিসেবে তাদের লেআউট স্ট্রাকচার প্রদর্শন করে। গ্রিড কন্টেইনারগুলো লেবেলযুক্ত ট্র্যাক সাইজসহ কলাম এবং রো লাইন দেখায়। ফ্লেক্স কন্টেইনারগুলো মেইন অ্যাক্সিস ডিরেকশন, ক্রস অ্যাক্সিস অ্যালাইনমেন্ট এবং স্পেস কীভাবে বিন্যস্ত হয়েছে তা দেখায়। গ্যাপগুলো রঙিন ব্যান্ডের মাধ্যমে হাইলাইট করা হয় এবং তাদের পিক্সেল ভ্যালু দেখানো হয়। প্রতিটি লেআউট প্রোপার্টির বিস্তারিত তালিকা দেখতে যেকোনো কন্টেইনারে ক্লিক করুন।
গ্রিড কন্টেইনারগুলো প্রতিটি রো এবং কলাম ট্র্যাকের জন্য রঙিন লাইন দেখায়। প্রতিটি লাইনে ট্র্যাক সাইজ (1fr, auto, 200px) লেবেল করা থাকে। গ্যাপ এরিয়াগুলো পিক্সেলে গ্যাপ ভ্যালুসহ আধা-স্বচ্ছ ব্যান্ডের মাধ্যমে হাইলাইট করা হয়। সলিড বনাম ড্যাশড লাইনের মাধ্যমে ইমপ্লিসিট (implicit) এবং এক্সপ্লিসিট (explicit) ট্র্যাকগুলোর মধ্যে পার্থক্য করা হয়।
ফ্লেক্স কন্টেইনারগুলো একটি তিরের মাধ্যমে মেইন অ্যাক্সিস (row, row-reverse, column, column-reverse) এবং এর সাথে লম্বভাবে থাকা ক্রস অ্যাক্সিস দেখায়। justify-content এবং align-items লেবেলযুক্ত অ্যালাইনমেন্ট ইন্ডিকেটরের মাধ্যমে ভিজুয়ালাইজ করা হয় যা দেখায় যে চাইল্ড এলিমেন্টগুলোর মধ্যে স্পেস কীভাবে ডিস্ট্রিবিউট বা বিন্যস্ত করা হয়েছে।
টুলটি স্বয়ংক্রিয়ভাবে পুরো পেজটি স্ক্যান করে এবং display: grid বা display: flex (ইনলাইন ভেরিয়েন্টসহ) থাকা প্রতিটি এলিমেন্ট খুঁজে বের করে। একটি ব্যাজ কাউন্ট মোট কতটি এলিমেন্ট শনাক্ত করা হয়েছে তা দেখায়। ম্যানুয়ালি এলিমেন্ট সিলেক্ট করার কোনো প্রয়োজন নেই — সেগুলো সব অটোমেটিক খুঁজে বের করা হয় এবং তালিকার অন্তর্ভুক্ত করা হয়।
যেকোনো কন্টেইনারের সম্পূর্ণ লেআউট প্রোপার্টি দেখতে সেটিতে ক্লিক করুন: grid-template-columns/rows, grid-gap, flex-direction, justify-content, align-items, flex-wrap এবং সমস্ত চাইল্ড সাইজিং প্রোপার্টি (flex-grow, flex-shrink, flex-basis, grid-column, grid-row)।
একটি গ্রিড বা ফ্লেক্স কন্টেইনারের অন্তর্গত প্রতিটি চাইল্ড এলিমেন্ট তার প্রকৃত রেন্ডার করা সাইজ, flex-grow/shrink ভ্যালু এবং গ্রিড এরিয়া প্লেসমেন্ট প্রদর্শন করে। প্রতিটি চাইল্ড ঠিক কতটা জায়গা দখল করছে এবং কেন তা এখানে সরাসরি দেখতে পাবেন।
অন্যান্য Grid/Flex কন্টেইনারের ভেতরে নেস্ট করা (nested) Grid এবং Flex কন্টেইনারগুলো শনাক্ত করে। ওভারলেটি প্রতিটি নেস্টিং লেভেলকে আলাদা আলাদা রঙে রেন্ডার করে যাতে আপনি সম্পূর্ণ লেআউট হায়ারার্কি দেখতে পারেন।
একটি গ্রিড কলাম কি প্রত্যাশার চেয়ে বেশি চওড়া বা সরু? ওভারলেটি প্রকৃত ট্র্যাক সাইজগুলো (যেমন 1fr থেকে পাওয়া গেছে 342px, auto থেকে 156px) দেখায় যাতে আপনি দেখতে পারেন ব্রাউজার ঠিক কীভাবে সাইজগুলো ক্যালকুলেট করেছে।
কেন একটি ফ্লেক্স চাইল্ড অন্যটির চেয়ে বেশি চওড়া? ভিজ্যুয়ালাইজারটি প্রতিটি চাইল্ডের জন্য flex-grow, flex-shrink এবং flex-basis ভ্যালুগুলো দেখায়, যা স্পেস ডিস্ট্রিবিউশন লজিককে দৃশ্যমান করে।
ব্রাউজারটি রিসাইজ করুন এবং রিয়েল-টাইমে গ্রিড ওভারলে আপডেট হওয়া দেখুন। দেখুন কীভাবে 'grid-template-columns' ডেস্কটপে "1fr 1fr 1fr" থেকে মোবাইলে "1fr"-এ পরিবর্তিত হচ্ছে এবং প্রতিটি ব্রেকপয়েন্টে এই ট্রানজিশন যাচাই করুন।
উন্নত মানের ওয়েবসাইটগুলো ভিজিট করুন এবং প্রোডাকশনে তারা কীভাবে গ্রিড এবং ফ্লেক্স লেআউট ব্যবহার করে তা দেখুন। ভিজ্যুয়াল ওভারলেগুলো অ্যাবস্ট্র্যাক্ট কনসেপ্টগুলোকে (যেমন fr ইউনিট, auto-fit, justify-content) বাস্তব এবং ইন্টারঅ্যাক্টিভ করে তোলে।
পেজের সমস্ত কার্ড গ্রিড একই কলাম কাউন্ট এবং গ্যাপ ভ্যালু ব্যবহার করছে কিনা তা পরীক্ষা করুন। ওভারলেটি অসামঞ্জস্যতাগুলো তাৎক্ষণিকভাবে দৃশ্যমান করে তোলে — যেমন একটি সেকশনে ২০px গ্যাপ এবং অন্যটিতে ২৪px গ্যাপ থাকলে তা এক নজরেই ধরা পড়বে।
DevSuite Pro ফ্লোটিং ডক ওপেন করুন এবং Grid/Flex Visualizer আইকনে ক্লিক করুন। টুলটি পেজটি স্ক্যান করবে এবং সমস্ত Grid ও Flex কন্টেইনার শনাক্ত করবে।
প্রতিটি Grid এবং Flex কন্টেইনার একটি রঙিন বর্ডার ওভারলে হিসেবে প্রদর্শিত হবে। একটি প্যানেল শনাক্ত করা সমস্ত কন্টেইনারকে তাদের টাইপ (Grid বা Flex) এবং এলিমেন্ট সিলেক্টরসহ তালিকাভুক্ত করবে।
যেকোনো কন্টেইনারের সম্পূর্ণ লেআউট প্রোপার্টি দেখতে সেটিতে ক্লিক করুন। গ্রিড কন্টেইনারগুলো ট্র্যাক লাইন এবং সাইজ দেখায়; ফ্লেক্স কন্টেইনারগুলো অ্যাক্সিস ডিরেকশন এবং অ্যালাইনমেন্ট দেখায়।
প্রতিটি চাইল্ড এলিমেন্ট তার কমপিউটেড (computed) সাইজ এবং লেআউট-নির্দিষ্ট প্রোপার্টি (flex-grow, grid-area) প্রদর্শন করে। চাইল্ডগুলোর মধ্যে স্পেস কীভাবে বিন্যস্ত হয়েছে তা এখানে বুঝতে পারবেন।
সমস্ত ওভারলে সড়িয়ে নিতে এবং স্বাভাবিক পেজ ভিউতে ফিরতে পুনরায় টুল আইকনে ক্লিক করুন।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৩৯+ ডেভলপার টুল আনলক করুন।
