gridt, created by Gavin Kondrath, is a Chrome extension that overlays CSS Grid guides to aid layout alignment. It renders adjustable column and row guides over live pages so developers can compare code to rendered layouts. The extension highlights custom grid templates, keeps overlays during development cycles, and offers keyboard toggles. It targets front-end developers and UI/UX designers who need direct, code-aligned visual feedback while building responsive grid layouts in the browser.

What problem does the extension address for layout work?

The extension places a visual guide on top of web pages so designers can match markup to rendered grids, addressing misaligned components and inconsistent spacing across breakpoints. Its purpose is to expose grid lines and areas directly on the page, which helps validate column and row alignment without switching back and forth between inspector panes and the live view.

How it behaves during active development and page updates

The extension preserves its overlay across refreshes and hot reloads, which keeps the grid visible while you edit styles or rebuild assets. It can attach overlays to individual DOM elements using CSS selectors, permitting focused inspection of nested layouts rather than only full-page grids. The tool is described as lightweight, so it integrates into iterative workflows without requiring a separate inspection step.

How configurable is the visual grid for complex layouts?

The extension exposes settings for columns, rows, grid gaps, and outside margins, plus adjustable line colors and stroke widths for visibility on varied backgrounds. It accepts explicit grid-template-columns and grid-template-rows values, allowing representation of non-uniform tracks. Custom keyboard shortcuts let users toggle visibility quickly, reducing context switches when checking multiple layouts or states.

Gridt fits developers who work directly with CSS Grid and selectors

Gridt is a pragmatic choice for developers and designers comfortable editing CSS rules, because it maps code-level grid definitions onto the rendered page. The extension is less suited to users who prefer drag-and-drop visual builders. Try the Developer Mode interface for active debugging sessions and use the customizable shortcut to hide overlays when sharing pages with stakeholders.