Layout Grid Overlay

WHAT IT DOES

Layout Grid Overlay places a fully customizable grid system directly on top of any webpage, helping you analyze and verify design layouts with pixel-perfect precision. The overlay displays column guides with adjustable count, gutter width, and opacity, plus a baseline grid for vertical rhythm checking. Choose from preset grid templates including Bootstrap, Foundation, 12-column, and 16-column systems, or create your own custom configuration. The tool shows horizontal and vertical guide lines at center and third points, making it easy to check alignment against common design principles. All grid settings update in real time as you adjust them.

WHERE IT RUNS

The extension runs entirely within your browser's local environment using the BotGentz framework. All grid rendering, overlay positioning, and layout calculations occur on your machine without any network requests. No page content, grid data, or user activity is ever transmitted, uploaded, or stored externally. The tool works on any website and respects the browser's security boundaries, operating within the isolated extension sandbox.

HOW TO USE

Click the extension toolbar icon to open the Layout Grid Overlay panel. Click "Show Grid" to activate the overlay on the current page. Select a preset grid from the presets section (Bootstrap, Foundation, 12-Column, or 16-Column) to instantly apply a standardized grid system. For custom configurations, adjust the columns, gutter width, and row height values, then click "Apply Custom Grid." Use the color picker to change the grid color to suit different page backgrounds. Toggle "Show baseline grid" to display horizontal rhythm lines. Toggle "Show guide lines" to display center and third-point alignment guides. Adjust the opacity slider to make the grid more or less prominent. The grid automatically reappears when you revisit a page with the overlay active.

THE POSITION-BASED OVERLAY ENGINE — WHY IT WORKS

Most layout overlays attempt to calculate column positions using complex DOM measurements that fail when pages resize or use dynamic layouts. This tool uses a different approach: it creates a fixed-position overlay layer at the highest z-index possible, then calculates column positions as percentages of the viewport width. Each column is positioned using CSS left percentages, with gutters calculated as fractional units between columns. The baseline grid is rendered using absolute pixel positions from the top of the viewport, with rows calculated by dividing the viewport height by the specified row height. By using position:fixed with percentage-based math for columns and pixel-based math for baseline rows, the overlay maintains perfect alignment regardless of scrolling, zoom, or window resizing. The engine also recalculates and re-renders the entire grid on resize events, ensuring the overlay always matches the current viewport dimensions.

THE PANEL

The Layout Grid Overlay panel is fully draggable by its title bar and remembers its position on screen per website. It snaps to the edges of your browser window for clean alignment. Collapse the panel to a compact icon strip using the minimize button, restoring it with a single click. Resize the panel by dragging any edge or corner; the grid controls and options adjust proportionally. Press the Escape key to close the panel instantly, though the grid overlay remains active if toggled on. The panel maintains independent state for each browser tab, allowing you to use different grid configurations in different tabs simultaneously.

PLEASE NOTE

This extension requires the free BotGentz extension framework to be installed and enabled. Websites continuously evolve their rendering techniques and layout structures; while the overlay works across most modern sites, complex scenarios like CSS transforms, fixed-position elements, or iframes may not display the grid as expected. All grid configuration data is stored locally in your browser's storage and is never transmitted, logged, or shared. The extension requests no network permissions and functions entirely offline. The source code is fully auditable and available for review.