Media
5 items
Description
A Chrome extension to visualize and customize grid layouts on webpages 🟦 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