New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-grid] Support named lines #1020

Open
yepninja opened this Issue Apr 17, 2018 · 6 comments

Comments

3 participants
@yepninja
Collaborator

yepninja commented Apr 17, 2018

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

This comment has been minimized.

Collaborator

yepninja commented Apr 17, 2018

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.

@ai ai added the support label Apr 17, 2018

@Dan503

This comment has been minimized.

Contributor

Dan503 commented May 1, 2018

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

@Dan503

This comment has been minimized.

Contributor

Dan503 commented May 11, 2018

This comment on the css-working-group issue tracker gave an interesting use case
w3c/csswg-drafts#2270 (comment)

.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

This comment has been minimized.

Contributor

Dan503 commented May 14, 2018

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 #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

This comment has been minimized.

Collaborator

yepninja commented May 14, 2018

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

@Dan503

This comment has been minimized.

Contributor

Dan503 commented Nov 27, 2018

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment