Skip to content
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 · 7 comments
Open

[css-grid] Support named lines #1020

yepninja opened this issue Apr 17, 2018 · 7 comments
Labels

Comments

@yepninja
Copy link
Collaborator

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
Copy link
Collaborator Author

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
Copy link
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
Copy link
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
Copy link
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
Copy link
Collaborator Author

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

@Dan503
Copy link
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)

@ai
Copy link
Member

ai commented Mar 5, 2019

We added warning for named lines b54ea06

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants