Skip to content

[css-grid] Clarify "Automatic repetitions cannot be combined with intrinsic or flexible sizes" #7238

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

Closed
Loirooriol opened this issue Apr 28, 2022 · 9 comments
Labels
Closed Accepted as Editorial Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-grid-1 css-grid-2 Subgrid; Current Work

Comments

@Loirooriol
Copy link
Contributor

https://drafts.csswg.org/css-grid/#repeat-syntax

Automatic repetitions (auto-fill or auto-fit) cannot be combined with intrinsic or flexible sizes.

Effectively, these are false:

CSS.supports("grid-template-rows: repeat(auto-fill, 1px) auto"); // false
CSS.supports("grid-template-rows: repeat(auto-fill, 1px) min-content"); // false
CSS.supports("grid-template-rows: repeat(auto-fill, 1px) max-content"); // false
CSS.supports("grid-template-rows: repeat(auto-fill, 1px) fit-content(0px)"); // false
CSS.supports("grid-template-rows: repeat(auto-fill, 1px) 1fr"); // false

However, these are true:

CSS.supports("grid-template-rows: repeat(auto-fill, 1px) minmax(1px, auto)"); // true
CSS.supports("grid-template-rows: repeat(auto-fill, 1px) minmax(auto, 1px)"); // true
CSS.supports("grid-template-rows: repeat(auto-fill, 1px) minmax(1px, min-content)"); // true
CSS.supports("grid-template-rows: repeat(auto-fill, 1px) minmax(min-content, 1px)"); // true
CSS.supports("grid-template-rows: repeat(auto-fill, 1px) minmax(1px, max-content)"); // true
CSS.supports("grid-template-rows: repeat(auto-fill, 1px) minmax(max-content, 1px)"); // true
CSS.supports("grid-template-rows: repeat(auto-fill, 1px) minmax(1px, 1fr)"); // true

Tested in Blink, Gecko and WebKit.

So I guess the spec should make it clear that these combinations are fine. Basically, it seems the requirement is that for each track, at least one of the min/max track sizing functions should be fixed.

@Loirooriol Loirooriol added css-grid-1 css-grid-2 Subgrid; Current Work labels Apr 28, 2022
tabatkins added a commit that referenced this issue Oct 3, 2022
…ly* intrinsic, but can have an intrinsic length (if paired with a fixed in minmax()). #7238
@tabatkins
Copy link
Member

Okay, clarified the text slightly, and explicitly referred to the grammar for details on what it means. Let us know if this works?

@Loirooriol
Copy link
Contributor Author

Maybe replace "flexible" with "intrinsic flexible"? Since minmax(1px, 1fr) is fine.

@tabatkins
Copy link
Member

No, "flexible" is covered by the "fully", same as "intrinsic", implying the same "at least one argument is fixed".

@Loirooriol
Copy link
Contributor Author

Wouldn't "fully flexible" mean minmax(1fr, 1fr) that is invalid right now but there is some issue to add it in the future?

Basically, I don't see how "fully flexible" includes minamx(auto, 1fr) but excludes minmax(1px, 1fr).

@fantasai
Copy link
Collaborator

fantasai commented Oct 3, 2022

@Loirooriol In English, "or" is not necessarily exclusive.

@Loirooriol
Copy link
Contributor Author

@fantasai Are you implying that minmax(auto, 1fr) is both fully intrinsic and fully flexible?

@tabatkins
Copy link
Member

No, it's fully "intrinsic or flexible".

@tabatkins
Copy link
Member

(The point of all this, tho, is that the text is purposely suggestive, not precise, and the grammar is the actual definition of the restriction.)

@Loirooriol
Copy link
Contributor Author

Mm, OK, I see what you mean, seems a misleading wording to me but it defers to the grammar which is clear.

@Loirooriol Loirooriol added Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. and removed Commenter Response Pending labels Oct 3, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Closed Accepted as Editorial Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-grid-1 css-grid-2 Subgrid; Current Work
Projects
None yet
Development

No branches or pull requests

3 participants