Layout Grid Visualizer

A Chrome extension to visualize and customize grid layouts on webpages

🟦 Layout Grid Visualizer 🟦 A must-have Chrome extension for web developers and designers. Overlay a fully customizable grid on any webpage to visualize, debug, and perfect responsive layouts — no code changes required. ✨ Key Features: 🛠️ Customizable Grid Settings: Adjust grid width, columns, gutter size, color, and opacity in real time. 🎨 Whole-Percent Opacity: Clean integer opacity control with slider and number input. 🧩 Split Grid Mode: Build non-uniform layouts with custom column ratios, up to 6 columns. 🖱️ Grid Clickability Toggle: Make the overlay interactive or pass-through for seamless page interaction. 🎹 Keyboard Navigation: Move the overlay with arrow keys; hold Shift for larger steps. ⌨️ Keyboard Shortcut: Toggle the grid with Alt+Shift+G — no popup needed. 💾 Persistent Overlay Position: Position is saved across sessions and shared across tabs. 🛡️ Auto-correction & Tooltips: Invalid values are corrected safely, with clear inline messages. ♿ Accessibility: Labeled controls, ARIA support, visible focus states, reduced-motion support, and keyboard-friendly navigation. ⚡ Instant Feedback: Changes update the overlay immediately. 🔄 Reset to Defaults: One click restores all settings, including split-grid state. 🚀 Performance Optimized: Efficient DOM updates and debounced storage writes. 🧭 Compact Modern UI: High-contrast popup with a clean two-column layout and branded icon. 🚀 How It Works: Click the Layout Grid Visualizer icon in your Chrome toolbar. Press Show Grid or use Alt+Shift+G. Customize width, columns, gutter, color, opacity, and split layouts. Drag the overlay or reposition it with the arrow keys. Hide the grid 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 helps you see grids in action instantly. 🔒 Privacy: The extension does not collect, sell, or transmit personal data or page content. Settings are saved with Chrome’s synced extension storage (chrome.storage.sync) and may sync across devices signed into the same Chrome profile. No external servers are used. 📋 Requirements: Chrome 100 or newer. 🔗 GitHub Source: https://github.com/grohon/layout-grid-visualizer