-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
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
Comments
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. |
It would be a nice to have but not essential. I find it much easier to use grid areas instead. |
This comment on the css-working-group issue tracker gave an interesting use case .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. |
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. |
@Dan503 You are right. If we implement "named lines", we will use the same code to position areas as for "grid-template-areas". |
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: (Although I would personally rather use the |
We added warning for named lines b54ea06 |
Now names lines are skipped when processing
grid-template
:Example with repeat
Description and more examples here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines
The text was updated successfully, but these errors were encountered: