Layout Grid Visualizer is a Chrome extension that helps web developers and designers visualize and customize grid layouts on any webpage. Instantly overlay a customizable grid, including advanced split modes, to better understand, debug, and design responsive layouts.
| Feature | Description |
|---|---|
| Customizable Grid Settings | Set grid width, number of columns, gutter size, color, and opacity. |
| Split Grid Mode | Define custom column widths for advanced grid layouts. |
| Grid Clickability Toggle | Make the overlay grid interactive or pass-through for page interaction. |
| Keyboard Navigation | Move the overlay with arrow keys (Shift+Arrow for larger steps). |
| Persistent Overlay Position | Overlay position is saved and restored per tab. |
| Auto-correction & Tooltips | Invalid values are auto-corrected with tooltips explaining corrections. |
| Accessibility | Focusable overlay, ARIA labels, and full keyboard navigation. |
| Instant Feedback | All changes update the grid instantly. |
| Reset to Defaults | One-click reset for all settings, including split grid state. |
| Performance Optimized | Efficient DOM updates and storage usage for smooth experience. |
- Visit the Layout Grid Visualizer on Chrome Web Store.
- Click Add to Chrome and confirm the installation.
- Download or clone this repository.
- Go to
chrome://extensionsin your Chrome browser. - Enable "Developer mode" (top right).
- Click "Load unpacked" and select the project folder.
- Click the Layout Grid Visualizer icon in your Chrome toolbar.
- Adjust grid settings (width, columns, gutter, color, opacity) in the popup.
- Use Split Grid to define custom column widths (see below).
- Toggle the grid overlay on/off per tab.
- Drag the overlay to reposition, or use keyboard arrows for precise movement.
- Use Center Grid to recenter the overlay.
- Use Reset to Defaults to restore all settings.
- Toggle Grid Clickable to allow or block interaction with the overlay.
- Click Split Grid to enable split mode.
- Add or remove columns using the + and – buttons.
- Set individual column widths (e.g., 2, 4, 6 for a 3-column split).
- Switch back to uniform mode by clicking Uniform Grid or resetting.
- Move Overlay: Arrow keys (↑, ↓, ←, →)
- Move Faster: Shift + Arrow keys
- Focus Overlay: Click on the overlay
activeTab: To inject the grid overlay, rulers, and guides into the current page.storage: To save your grid and guide settings, overlay position, and accessibility preferences.scripting: To programmatically inject scripts (such as the content script) into the current page for grid and guide functionality.
Q: The grid overlay is not visible or not updating.
- Make sure the extension is enabled and the popup settings are valid (no red fields).
- Try toggling the grid off and on, or resetting to defaults.
Q: I can't interact with the page under the grid.
- Uncheck the Grid Clickable option to make the overlay pass-through.
Q: How do I use split grid mode?
- Click Split Grid, then use the +/– buttons and set custom widths for each column.
Q: Is the extension accessible?
- Yes! All controls have ARIA labels and keyboard navigation is fully supported.
Pull requests and suggestions are welcome! Please open an issue or PR for bug fixes, features, or improvements.
See our Privacy Policy for details on data usage and user privacy.
MIT License. See LICENSE for details.
Icon made by Pixel perfect from www.flaticon.com