[csswg-drafts] [css-grid] Allow to define overlapping grid areas using `grid-area` syntax (#9687)

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

== [css-grid] Allow to define overlapping grid areas using `grid-area` syntax ==
In #2808, a way to define overlapping grid areas using the existing string-based syntax is discussed.

While this is nice and visual, the string syntax used is a one-shot in CSS and doesn't align well with other syntaxes in CSS. This is especially true for when looking at how grid areas are defined in `grid-template-areas` and how they are used in `grid-area`.

Therefore, I suggest to re-use the grid-lines-based syntax of `grid-area` to define areas, allowing to define overlapping areas.

As noted in the issue suggesting to extend the string-based syntax, here's an example for how this may look like:

```css
.grid {
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  grid-template-areas:
    a 1 / 1 / -1 / 3,
    b 1 / 2 / 3 / -1,
    c 1 / 1 / 3 / 3,
    d 2 / 2 / -1 / -1;
}

.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }
```

So the formal syntax of `grid-template-areas` would be

```ebnf
grid-template-areas = none | <string>+ | <custom-ident> && <grid-template-line> [ / <grid-template-line> ]{0,3}
<grid-template-line> = <integer [-∞,-1]> | <integer [1,∞]> | span && [ <integer [1,∞]>
```

The big advantage of this approach is that the syntax fits perfectly to the syntax used in `grid-area` and to other syntaxes in CSS.
A small downside is that it's probably not integratable into the syntax of `grid-template`. Though that just means you have to define the track sizes and areas separately. And it might also be a case in which the syntax suggested in #2808 comes in handy.

Sebastian

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


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

Received on Friday, 8 December 2023 20:31:43 UTC