[css-grid] Support named lines

Now names lines are skipped when processing grid-template:

.wrapper {
  display: grid;
  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
}

.box1 {
  grid-column-start: main-start;
  grid-row-start: main-start;
  grid-row-end: main-end;
}

.box2 {
  grid-column-start: content-end;
  grid-row-start: main-start;
  grid-row-end: content-end;
}

.box3 {
  grid-column-start: content-start;
  grid-row-start: main-start;
}

.box4 {
  grid-column-start: content-start;
  grid-column-end: main-end;
  grid-row-start: content-end;
}

Example with repeat

.wrapper {
  display: grid;
  grid-template-columns: repeat(6, [col1-start] 1fr [col2-start] 3fr);
}

.item1 {
  grid-column: col1-start / col2-start 2
}

.item2 {
  grid-row: 2;
  grid-column: col1-start 2 / span 2 col1-start;
}

Description and more examples here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines

[Dan503]

As mentioned in #1155, there is a use case for line names in having an easy-ish way to have grid areas overlap one another.

.grid {
  grid-template-columns: [a-start] 1fr [b-start] 1fr [a-end] 1fr [b-end];
  grid-template-rows: [a-start] 1fr [b-start] 1fr [b-end] 1fr [a-end];
}
.a {
  grid-area: a;
}
.b {
  grid-area: b;
}

That will produce the same grid as what is shown in this code pen: https://codepen.io/daniel-tonon/pen/BGmXRb

(Although I would personally rather use the grid-column-end: span X; hack instead of reaching for line names to get this effect)

[ai]

We added warning for named lines b54ea06