Re: [csswg-drafts] Proposal: grid-guideline property for visualizing grid lines in development (#12921)

In real-world design workflows, having visible gridlines or guidelines is a fundamental visual aid — much like the graph paper used by architects, engineers, or even children learning to draw.

Applications such as CorelDRAW, Photoshop, or even Microsoft Word include grid or guide overlays to help users align and organize elements visually.
If the goal of CSS is, in part, to simulate real-world design principles, then having a visual feature such as grid-guideline could be a natural and helpful addition.

This would not only assist web designers while creating layouts but could also enable browser-based design tools to evolve closer to traditional desktop design software.

As an optional behavior, the Working Group could even consider linking this feature to design contexts — for example, having gridlines visible only when document.designMode = 'on'.
This property is already part of the WHATWG HTML standard
 and is supported across all major browsers, making it a logical place to expose design-oriented visual aids.

@astearns — Thank you for your question.
The problem is that developers currently rely on non-standard browser DevTools to visualize grid lines.
These implementations vary across browsers and are unavailable in many contexts (e.g., teaching environments, web-based editors, and design systems).
A standardized grid-guideline would ensure consistent visual behavior across all environments, making layout visualization predictable and accessible without DevTools.

@oSamDavis — I appreciate your reference to CSS Gap Decorations; that’s a fascinating proposal.
However, grid-guideline is not intended for styling content but for visual alignment and debugging.
While Gap Decorations can style spaces, guidelines would appear above all grid items (highest stacking context), providing an overlay similar to Figma’s layout grid.
Both concepts could complement each other well.

@Crissov — Thanks for pointing out the relation to invisible characters.
I agree that grid-guideline would be purely visual and non-rendering — it wouldn’t affect layout or user interaction.
It would simply visualize track boundaries, similar to design overlays in other creative tools.

Finally, I’d like to note that even if similar functionality can be approximated through non-standard or “hacky” solutions, that shouldn’t prevent official standardization.
Having a native, standardized, and interoperable feature ensures reliability and consistent user experience across all browsers — which is, ultimately, the spirit of the web platform.

-- 
GitHub Notification of comment by rezaei
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12921#issuecomment-3394071703 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 12 October 2025 08:38:20 UTC