CRX id
igcfgcdgijloeenpnoacomiioiomenab
igcfgcdgijloeenpnoacomiioiomenab
Description from extension meta
A Chrome extension to visualize and customize grid layouts on webpages
Image from store
Description from store
🟦 Layout Grid Visualizer 🟦
A must-have Chrome extension for web developers and designers! Instantly overlay a fully customizable grid on any webpage to visualize, debug, and perfect your responsive layouts.
✨ Key Features:
🛠️ Customizable Grid Settings: Adjust grid width, number of columns, gutter size, color, and opacity to match your design system.
🧩 Split Grid Mode: Define custom column widths for advanced, non-uniform grid layouts.
🖱️ Grid Clickability Toggle: Make the overlay interactive or pass-through for seamless page interaction.
🎹 Keyboard Navigation: Move and position the grid overlay precisely using arrow keys (with Shift for larger steps).
💾 Persistent Overlay Position: The grid’s position is saved and restored per tab for a consistent workflow.
🛡️ Auto-correction & Tooltips: Invalid values are auto-corrected with helpful tooltips.
♿ Accessibility: Fully keyboard navigable with ARIA labels for an inclusive experience.
⚡ Instant Feedback: All changes update the grid in real time.
🔄 Reset to Defaults: One-click reset for all settings, including split grid state.
🚀 Performance Optimized: Efficient DOM updates and storage for a smooth experience.
🚀 How It Works:
1️⃣ Click the Layout Grid Visualizer icon in your Chrome toolbar.
2️⃣ Instantly overlay a grid on any webpage.
3️⃣ Customize grid settings and modes to fit your needs.
4️⃣ Use keyboard shortcuts or drag to reposition the overlay.
5️⃣ Toggle the grid on/off or reset to defaults anytime.
🌟 Why Choose Layout Grid Visualizer?
Whether you’re building a new layout, debugging CSS, or reviewing responsive breakpoints, this extension gives you the power and flexibility to see your grids in action—no code changes required!
🔒 Privacy:
No data is collected or shared. All settings are stored locally in your browser.
🔗 GitHub Source: https://github.com/grohon/layout-grid-visualizer
Latest reviews
- (2025-06-30) Istiaq Ahmed: As a frontend developer, I work extensively with complex layouts across responsive breakpoints, and the Layout Grid Visualizer has quickly become one of my favorite go-to tools in my development workflow. This extension does exactly what it promises—it visually overlays your CSS grid layouts in the browser, making it incredibly easy to debug alignment, spacing, and container logic in real time. Whether you're working with Bootstrap, CSS Grid, Tailwind, or custom frameworks, the visual feedback is accurate, non-intrusive, and extremely helpful. If you work with layouts daily—and especially if you care about clean structure and pixel precision—this tool is a no-brainer. It saves time, reduces back-and-forth, and enhances your ability to ship clean, responsive designs faster. Highly recommended for developers, designers, and anyone who wants to make their layout debugging more visual, intuitive, and efficient.
- (2025-06-27) Kamrunnahar Siddiqua: An excellent tool for web designers! The grid overlay is clean, customizable, and incredibly helpful for aligning elements precisely. Easy to toggle on/off and perfect for visualizing layouts during development. A must-have for pixel-perfect design work!
- (2025-06-26) Hasibul Hossain Santo Sheikh: 🌟 Incredible First Impression! 🌟 I just installed Layout Grid Visualizer today, and I’m genuinely impressed. Even on first use, it’s clear that this extension fills a real gap for web developers and designers. Being able to instantly overlay a fully customizable grid on any webpage is a game-changer. Highly recommended for anyone working with layouts or responsive design. 👏