[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:

.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

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

Start by reading issue #2808 and compare its string-based proposal with the grid-lines-based grid-area syntax described here. Check the existing grid-template-areas definition and determine whether the proposed grammar is consistent with related CSS syntax. Done means the CSS Working Group has resolved the design and the corresponding editor-draft specification text is updated.