{"id":29088364,"url":"https://github.com/grohon/layout-grid-visualizer","last_synced_at":"2026-05-08T10:34:25.943Z","repository":{"id":301319930,"uuid":"1005687469","full_name":"Grohon/layout-grid-visualizer","owner":"Grohon","description":"Chrome Extension for Layout Grid Visualizer","archived":false,"fork":false,"pushed_at":"2025-06-26T08:13:07.000Z","size":63,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-26T09:27:22.358Z","etag":null,"topics":["chrome","extension","extension-chrome"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Grohon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-20T16:29:05.000Z","updated_at":"2025-06-26T08:13:10.000Z","dependencies_parsed_at":"2025-06-26T09:37:37.602Z","dependency_job_id":null,"html_url":"https://github.com/Grohon/layout-grid-visualizer","commit_stats":null,"previous_names":["grohon/layout-grid-visualizer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Grohon/layout-grid-visualizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Grohon%2Flayout-grid-visualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Grohon%2Flayout-grid-visualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Grohon%2Flayout-grid-visualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Grohon%2Flayout-grid-visualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Grohon","download_url":"https://codeload.github.com/Grohon/layout-grid-visualizer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Grohon%2Flayout-grid-visualizer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262366573,"owners_count":23299775,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chrome","extension","extension-chrome"],"created_at":"2025-06-28T03:01:19.922Z","updated_at":"2026-05-08T10:34:25.932Z","avatar_url":"https://github.com/Grohon.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003cimg src=\"https://res.cloudinary.com/dd1qlozhf/image/upload/v1750923184/icon_ve3pat.png\" width=\"24\"/\u003e Layout Grid Visualizer\n\n\u003cimg src=\"https://res.cloudinary.com/dd1qlozhf/image/upload/v1750923154/marquee-promo-tile_gencqg.png\"\u003e\n\n## Overview\nLayout 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.\n\n---\n\n## Features\n\n| Feature                        | Description                                                                                 |\n|-------------------------------|---------------------------------------------------------------------------------------------|\n| **Customizable Grid Settings** | Set grid width, number of columns, gutter size, color, and opacity.                         |\n| **Split Grid Mode**            | Define custom column widths for advanced grid layouts.                                       |\n| **Grid Clickability Toggle**   | Make the overlay grid interactive or pass-through for page interaction.                      |\n| **Keyboard Navigation**        | Move the overlay with arrow keys (Shift+Arrow for larger steps).                            |\n| **Keyboard Shortcut**          | Toggle grid overlay with `Alt+Shift+G` — no popup needed.                                   |\n| **Persistent Overlay Position**| Overlay position is saved and restored per tab.                                             |\n| **Auto-correction \u0026 Tooltips** | Invalid values are auto-corrected with tooltips explaining corrections.                      |\n| **Opacity Slider**             | Intuitive range slider for adjusting grid opacity.                                           |\n| **Accessibility**              | Focusable overlay, ARIA labels, and full keyboard navigation.                                |\n| **Instant Feedback**           | All changes update the grid instantly.                                                       |\n| **Reset to Defaults**          | One-click reset for all settings, including split grid state.                                |\n| **Performance Optimized**      | Efficient DOM updates and storage usage for smooth experience.                               |\n\n---\n\n## Installation\n\n### Install from Chrome Web Store\n\n1. Visit the [Layout Grid Visualizer on Chrome Web Store](https://chromewebstore.google.com/detail/layout-grid-visualizer/igcfgcdgijloeenpnoacomiioiomenab).\n2. Click **Add to Chrome** and confirm the installation.\n\n### Manual Installation (for development)\n\n1. Download or clone this repository.\n2. Go to `chrome://extensions` in your Chrome browser.\n3. Enable \"Developer mode\" (top right).\n4. Click \"Load unpacked\" and select the project folder.\n\n---\n\n## Usage\n\n1. Click the Layout Grid Visualizer icon in your Chrome toolbar.\n2. Adjust grid settings (width, columns, gutter, color, opacity) in the popup.\n3. Use **Split Grid** to define custom column widths (see below).\n4. Toggle the grid overlay on/off per tab.\n5. Drag the overlay to reposition, or use keyboard arrows for precise movement.\n6. Use **Center Grid** to recenter the overlay.\n7. Use **Reset to Defaults** to restore all settings.\n8. Toggle **Grid Clickable** to allow or block interaction with the overlay.\n\n---\n\n## Split Grid Mode\n\n- Click **Split Grid** to enable split mode.\n- Add or remove columns using the + and – buttons.\n- Set individual column widths (e.g., 2, 4, 6 for a 3-column split).\n- Switch back to uniform mode by clicking **Uniform Grid** or resetting.\n\n---\n\n## Keyboard Shortcuts\n\n- **Toggle Grid:** `Alt+Shift+G` — works without opening the popup\n- **Move Overlay:** Arrow keys (↑, ↓, ←, →)\n- **Move Faster:** Shift + Arrow keys\n- **Focus Overlay:** Click on the overlay\n\n---\n\n## Permissions\n\n- `activeTab`: To inject the grid overlay into the current page.\n- `storage`: To save your grid settings and overlay position.\n- `scripting`: To programmatically inject the content script and styles into the current page.\n\n---\n\n## Screenshots\n\n\u003cimg src=\"https://res.cloudinary.com/dd1qlozhf/image/upload/v1750923154/screenshot-1_ehcl38.png\"\u003e\n\u003cimg src=\"https://res.cloudinary.com/dd1qlozhf/image/upload/v1751006718/screenshot-2_aijoxt.png\"\u003e\n\u003cimg src=\"https://res.cloudinary.com/dd1qlozhf/image/upload/v1750923155/screenshot-4_i24771.png\"\u003e\n\u003cimg src=\"https://res.cloudinary.com/dd1qlozhf/image/upload/v1750923155/screenshot-3_dxdnyd.png\"\u003e\n\n---\n\n## Troubleshooting \u0026 FAQ\n\n**Q: The grid overlay is not visible or not updating.**\n- Make sure the extension is enabled and the popup settings are valid (no red fields).\n- Try toggling the grid off and on, or resetting to defaults.\n\n**Q: I can't interact with the page under the grid.**\n- Uncheck the **Grid Clickable** option to make the overlay pass-through.\n\n**Q: How do I use split grid mode?**\n- Click **Split Grid**, then use the +/– buttons and set custom widths for each column.\n\n**Q: Is the extension accessible?**\n- Yes! All controls have ARIA labels and keyboard navigation is fully supported.\n\n---\n\n## Contributing\n\nPull requests and suggestions are welcome! Please open an issue or PR for bug fixes, features, or improvements.\n\n---\n\n## Privacy Policy\n\nSee our [Privacy Policy](PRIVACY.md) for details on data usage and user privacy.\n\n---\n\n## License\n\nMIT License. See [LICENSE](LICENSE) for details.\n\n---\n\n## Credits\n\nIcon made by [Pixel perfect](https://www.flaticon.com/authors/pixel-perfect) from [www.flaticon.com](http://www.flaticon.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrohon%2Flayout-grid-visualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrohon%2Flayout-grid-visualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrohon%2Flayout-grid-visualizer/lists"}