Debug grid overlay
A 12-column overlay using repeating-linear-gradient that sits above your content. Toggle with a keyboard shortcut during development to verify alignment.
Quick implementation
/* Debug grid overlay — add class="debug-grid" to body to activate */
.debug-grid::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
/* 12-column grid: 8.333% per column, 16px gutter */
background-image: repeating-linear-gradient(
to right,
oklch(0.52 0.22 265 / 0.1) 0px,
oklch(0.52 0.22 265 / 0.1) calc(8.333% - 16px),
transparent calc(8.333% - 16px),
transparent 8.333%
);
}
/* Keyboard toggle with a tiny JS snippet */
/* CSS outline debug — show all element boxes */
.debug-outline * {
outline: 1px solid oklch(0.52 0.22 265 / 0.3);
}
/* CSS spacing debug — highlight padding and margin */
.debug-spacing * {
background: oklch(0.52 0.22 265 / 0.05) !important;
}Prompt this to your LLM
Includes role, constraints, framework variants, and edge cases.
You are a senior frontend engineer building developer tooling
for a CSS design system.
Goal: Create a CSS debug grid overlay that visualizes a 12-column
layout grid during development, toggleable with a keyboard shortcut.
CSS part:
- Use body.debug-grid::before with position: fixed, z-index: 9999,
pointer-events: none
- Generate the grid columns using repeating-linear-gradient
- The grid should respect a --max-width and --gutter CSS variable
so it matches the actual layout container
JavaScript part:
- Toggle the class on body with document.documentElement
- Bind to the keyboard shortcut Ctrl+G (or Cmd+G on Mac)
- Persist the toggle state in localStorage so it survives page reload
Also include:
- A debug outline mode (Ctrl+Shift+G): outline: 1px solid on all
elements to see box boundaries
- Explanation of why pointer-events: none is critical
Return the CSS and JavaScript with inline comments.repeating-linear-gradient for grid columns
A 12-column grid with 16px gutters on a 1200px max-width container means each column is approximately (1200 - 11 × 16) / 12 ≈ 85px, but this varies with viewport width. Using percentages: 8.333% is one twelfth. The gradient draws a colored stripe from 0 to calc(8.333% - 16px) (the column), then transparent from there to 8.333% (the gutter). repeating-linear-gradient repeats this pattern across the full width automatically — no JavaScript needed to calculate positions.
pointer-events: none
The overlay sits at z-index: 9999 over the entire page. Without pointer-events: none, it would intercept every click, hover, and drag event — making the page unusable while the overlay is active. pointer-events: none makes the element transparent to mouse and touch interactions: events pass through it to whatever is underneath. This is also the correct approach for decorative overlays, tooltip arrows, and any purely visual element that shouldn't interrupt user interaction.