Gridly

Building high-quality websites requires strict attention to alignment and spacing. This extension lets you project a customizable layout grid directly onto any webpage.

Whether you are translating a complex mock-up into CSS or just doing a quick visual QA on a client's site, this tool gives you the visual boundaries you need to ensure every element sits exactly where it should.

Key Features:

• Fully Customizable Grids: Define your own column count, row count, and baseline grids to match your specific layout requirements.
• Granular Spacing Control: Easily adjust gutters, margins, and container widths to reflect your project's precise design tokens.
• Visual Styling: Change the grid's color and opacity so it stands out against any background—whether you are working on a sleek dark mode UI or a bright e-commerce layout.
• Lightweight & Fast: Built for performance, it won't bog down your browser or interfere with the site's underlying code.
• Quick Toggle: Instantly turn the grid overlay on or off with a single click as you tweak your CSS.

• Front-end developers aligning UI components.
• Web designers auditing live pages against their original files.
• Anyone who wants to debug layout shifts, padding inconsistencies, or responsive breakpoints visually.