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

[fantasai]

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.

[tabatkins]

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]

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]

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]

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]

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.