Skip to content

[css-grid-2] Allow fr units as min #2611

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

Open
fantasai opened this issue Apr 25, 2018 · 6 comments
Open

[css-grid-2] Allow fr units as min #2611

fantasai opened this issue Apr 25, 2018 · 6 comments
Labels

Comments

@fantasai
Copy link
Collaborator

https://lists.w3.org/Archives/Public/www-style/2016Apr/0197.html

We made fr units invalid as the min in minmax() so that we could maybe make them do something useful in Grid Level 2 as @meyerweb requested, so let's see if we can make that work.

@fantasai fantasai added the css-grid-2 Subgrid; Current Work label Apr 25, 2018
@tabatkins
Copy link
Member

tabatkins commented Apr 30, 2018

So @meyerweb's request is basically that minmax(1fr, 300px) should act similar to 1fr, except with a check in the flexible-sizing step that freezes it at 300px (like how flexbox handles max-width/height).

Wrinkle: does this have the implicit auto minimum that fr defaults to? That is, 1fr is normally equivalent to minmax(auto, 1fr); you can opt into a zero min by explicitly saying minmax(0, 1fr). There doesn't seem to be an expansion-point for that here?

(And we can't use the min() or max() functions, because you'd have to group the fr with either the min or max length, which aren't compatible units.)

@fantasai
Copy link
Collaborator Author

I'd suggest including the implicit minimum, since you can also disable it by setting min-width: 0 on the items. Expansion point could be to allow a third argument if the middle is <flex>: minmax(minimum, <flex>, maximum).

@fantasai
Copy link
Collaborator Author

fantasai commented May 3, 2018

If we don't allow keywords in the max position, this should just mean we freeze out tracks during Expand Flexible Tracks, kinda like we do for flex items when flexing. I don't think any other changes are needed--other than capping the auto minimum at the specified max--so it should be pretty straightforward to add to the algorithm.

If we need the content-based keywords as maxes, then it gets more complicated because we have to compute those. But also ignore that they exit during Maximize Tracks. But it doesn't seem likely that we need those, though: if you want fr units, you generally don't want to max out at a content-based value, you want to cap out at something with a predictable relationship to other tracks in the grid.

Probably need to wait until Grid 2 Revision 2 is done to port over the algorithm, but otherwise I think the above outlines what we need to do.

  • Allow <flex> as a minimum, together with a <length-percentage> max. (Or maybe just a <length>, because I hate percentages, heh. Also why are you using a percentage if you're using fr units?)
  • <flex> minimum implies auto minimum, which needs to be capped by the max.
  • Freeze out tracks as they hit their max, just like in Flexbox.

Open Questions:

  • Should we allow <percentage> in the max position? It's not that hard to define, but it's added work to implement and test and seems of limited usefulness.
  • Do we need content-based keywords in the max position?
  • Should we add the 3-argument syntax to allow for a non-auto min?

I'm inclined to start with the most minimal featureset and see what people complain about as being missing.

@rachelandrew
Copy link
Contributor

I think people will want percentages, if only so they can use grid along with other layout methods which use percentages and stuff will line up down the grid/fake grid bits - not everyone is developing a brand new site but placing components that use grid into an existing one. If it's possible to have <length-percentage> then I think we should.

I can't quickly think of a use case for content-based keywords as max, I'll have a dig back through questions people have asked me and see if anything stands out.

@css-meeting-bot
Copy link
Member

The Working Group just discussed Allow fr units as min, and agreed to the following:

  • RESOLVED: Add fr unit support inside minmax for Grid L2.
The full IRC log of that discussion <dael> Topic: Allow fr units as min
<dael> github: https://github.com//issues/2611
<dael> fantasai: Based on rachelandrew I say we allow length or % but not content based keywords
<fantasai> https://github.com//issues/2611#issuecomment-386469857
<dael> fantasai: We limited what you can put in min position of minmax in L1 because the requests came late. One of the use cases was I want fr with a cap of 250px
<dael> fantasai: We wanted that tow ork. Figured out it's straight forward if there's not content based keywords
<dael> fantasai: Open questions are do we want to, I think yes. 2) allow % in max position and I think we should. 3) Should we allow content based kewords in max position- no clear use case and complex to impl so I think start with no
<dael> fantasai: 4) Do we want to allow a 3 argument minmax where you have some kind of explicit min like a content keyword or a length and then an fr unit in the middle and a max in the top
<dael> Rossen: Let's go separate. fr unit as a part of minmax first and see if we can resolve. Then 3 value
<dael> Rossen: Are there additional comments or ideas about support of fr units?
<dael> Rossen: proposed addition of fr unit support inside minmax for Grid L2. Objections?
<dael> RESOLVED: Add fr unit support inside minmax for Grid L2.
<fantasai> s/inside/as min arg inside/
<fantasai> minmax(1fr, 250px) is accepted
<dael> Rossen: Secondary issue is should we allow an additional 3rd functional value in the middle of min and max used for flexing and how that behaves
<fantasai> question is now minmax(5em, 2fr, 250px)
<dael> Rossen: Additional comments?
<dael> Rossen: What's the primary use case for 3 value?
<dael> fantasai: Right now you can control min or max of fr unit, column has to be at least this, but I want 1 fr. Or you can say 1fr but cap. You can't do both. You might want a 0 minimum and you want 1fr and a cap of 250px
<dael> Rossen: Basically you want...I see an example...min 1em, max 250px, and then 2fr in this casewill...
<dael> fantasai: We can come back to this.
<dael> Rossen: Yeeeeeaaah...I'm not sure.
<dael> Rossen: Why isn't that covered by min width?
<dael> fantasai: In a sense it is. You can't do min width on column
<dael> Rossen: Ah this is for columns
<dael> fantasai: Yeah, since fr have implicit auto minimum if you set min width on any items we'll use that. So you can kind of get there
<dael> rachelandrew: I've had people ask for this. THat's the advice I gave is put something on item
<dael> Rossen: It's achievable using items as a spacer and fr as the min
<dael> Rossen: I'd be happy to come back. I want to think a bit more on this.
<dael> Rossen: If others are ready?
<dael> [silence]
<dael> Rossen: Should we come back to this?
<dael> fantasai: We'll close this and consider the 3 value syntax in the future.

@yisibl
Copy link
Contributor

yisibl commented Apr 11, 2024

Any news?

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

5 participants