[css-grid] Support named lines

[yepninja]

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

[yepninja]

I think it has very low priority, but it's interesting and real case. It's would be cool to have some voting about such features to understand are they really useful for users.

[Dan503]

It would be a nice to have but not essential. I find it much easier to use grid areas instead.

[Dan503]

This comment on the css-working-group issue tracker gave an interesting use case https://github.com/w3c/csswg-drafts/issues/2270#issuecomment-388222647

.grid {
  grid-template-rows: [start] repeat(2, repeat(2, repeat(3, minmax(0,1fr) [small]) [medium]) [large] [half]) [end]; 
}

.small { grid-column-end: span small; }
.medium { grid-column-end: span medium }
.large { grid-column-end: span large }
.half { grid-column-end: span half }
.full { grid-column-start: start; grid-column-end: end; }

It's a bit of a monster. I thought I would post it here as an interesting super complicated test case for this issue.

Update

That syntax isn't actually valid. I tried pasting it into a browser and Chrome doesn't recognize it. Nesting repeats inside of repeats doesn't seem to be valid CSS Grid syntax.

[Dan503]

If this was implemented then it would have the same issue as grid areas in that every line name would need to be unique in order for Autoprefixer to tell what cells belong to what grids.

As suggested in issue https://github.com/postcss/autoprefixer/issues/1038 there should be a warning if the user uses a duplicate line name. This will prevent users from building their site with lot's of duplicates and then seeing it blow up in IE.

[yepninja]

@Dan503 You are right. If we implement "named lines", we will use the same code to position areas as for "grid-template-areas".

[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