Layout Grid Visualizer

About

🟦 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).
🎹 Keyboard Shortcut: Toggle grid overlay with Alt+Shift+G — no popup needed.  
💾 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