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

rezaei has just created a new issue for https://github.com/w3c/csswg-drafts:

== Proposal: grid-guideline property for visualizing grid lines in development ==
# Proposal: grid-guideline property for visualizing grid lines in development

## Problem

In CSS Grid, grid lines are conceptual and are not visually displayed on the page.
For developers and designers, being able to see the grid lines during design and debugging would be very helpful.

Current workarounds have limitations:

Using outline or border only affects items, so empty cells remain invisible.

For grids with variable row heights and column widths, manual calculations or JavaScript overlays are required.

Developers often rely on browser DevTools, which are not part of the standard CSS.


## Proposed New Feature

<img width="265" height="265" alt="Image" src="https://github.com/user-attachments/assets/15f1a6d4-c4a5-4638-8446-05a0841432a4" />

### Introduce a new property:
`
grid-guideline: <value>;`


The value works similar to border, accepting standard border properties:

Color: green, rgba(0,0,0,0.3)

Thickness: 1px, 2px

Style: solid, dashed, dotted

### Example
```
.container {
  display: grid;
  grid-template-columns: 100px 2fr 150px;
  grid-template-rows: 80px auto 60px;
  gap: 10px;

  grid-guideline: 1px dashed rgba(255,0,0,0.3);

}

```

Grid lines are visually displayed for all cells, including empty ones.

Intended for development/debugging purposes only; can be disabled in production.

Behaves similarly to border and is fully compatible with standard CSS syntax.

Grid lines should appear on top of all grid items, i.e., have the highest z-index within the grid.

### Advantages

Provides visual guidance for all grid cells without external overlays or manual calculations.

Supports grids with variable column widths and row heights.

Useful for teaching and documentation of CSS Grid.

Simple and consistent with existing CSS conventions.

### Notes

This feature does not affect layout or positioning of grid items.

Could be optionally scoped to @media (development) or similar approaches for production safety.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12921 using your GitHub account


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

Received on Thursday, 9 October 2025 13:07:54 UTC