[css-grid-3] Repeat range

[fantasai]

From @bfgeek's https://github.com/w3c/csswg-drafts/issues/9041

One addition which is currently missing with grid repeaters is the ability to clamp to a minimum / maximum number. This is more relevant with masonry. E.g. masonry-template: repeat(auto-fill, /* min */ 1, /* max */ 5, auto) would allow clamping to a maximum of 5 tracks which seems desirable from designs I've seen. (this is probably a bad syntax but you get the idea).

[fantasai]

Proposed syntax:

repeat( [ auto-fill | auto-fit ] && <number>{1,2} , ... )

• The first number is the minimum, the second is the maximum, but are part of the first argument of the repeat() function -- the second argument remains the track listing.
• If only one number is given, it's the maximum. (Similar to how columns works.)
• We could also make the keyword optional if two numbers are given, and default to auto-fill.

[css-meeting-bot]

The CSS Working Group just discussed [css-grid-3] Repeat range, and agreed to the following:

• RESOLVED: Add two numbers to the repeat function that when used with one of the keywords define a range

The full IRC log of that discussion

<TabAtkins> +1 to the proposal, and to making the keyword optional if numbers are given (defaulting to auto-fill)
<dael> fantasai: Another issue iank_ brought up is desire to have repetition, example 3 to 5 instead of exactly 5. Seemed useful for grid regardless of masonary. Opened issue to propse repeat syntax that covers a range. It would be autofill or autofit with one or two numbers. If two, first is min and second is max. If you only give one it's a max.
<dael> fantasai: One is a max is consistent with how we do multicol. And consistent that main problem is too narrow, not too wide
<oriol> q+
<dael> fantasai: Syntax is reorderable b/c generally want to allow reordering unless parsing reason not to
<astearns> ack oriol
<dael> oriol: It seems reasonable to me to be able to spec a min with no max. I guess you could do it was calc 1/0 to get infinity. Should we add a way to spec min?
<dael> fantasai: You can spec infinity as a keyword. You can spec a keyword for no ax
<dael> TabAtkins: I agree makes sense to allow unspecified as max so keyword makes sense
<dael> fantasai: keyword like nomax?
<dael> TabAtkins: Should go with infinity. Or infinite.
<fantasai> s/nomax/no-max/
<dael> fantasai: Okay, that's in animation. good to be consistent
<dael> astearns: If you have a repeat that's repeat(autofill 3) it's a max but if you add infinite keyword the 3 is the minimum
<dael> fantasai: If you add a 5 the minimum is 3.
<dael> TabAtkins: Having consistently the first number be the min isn't problematic and you can always add a max
<dael> fantasai: I don't think we want to do that becase columns we do that as a maximum
<dael> astearns: Question do we require 2 numbers
<dael> TabAtkins: IN concat can we do min and max?
<dael> fantasai: Just a max
<dael> TabAtkins: Then I think more comfortable requiring 2
<TabAtkins> s/concat/column-count/
<dael> fantasai: I could live with that.
<dael> fantasai: I think it would be nice to have the one, but if we want to require we can do that
<dael> astearns: We can start with both and when there's author experience decide if we want to allow a single
<dael> astearns: One question...you talk about this is important for masonary, but also important for non-masonary
<dael> 3?
<dael> fantasai:
<dael> Yes. Prop is add to grid properties to effect both
<fantasai> s/effect/affect/
<dael> astearns: And we don't have a repeat function?
<dael> fantasai: Repeat can take number or a keyword. This allows you to combine both to get a range
<TabAtkins> i forgot that we could take a number by itself. in that case i definitely think the range should require both
<dael> astearns: Prop: Add two numbers to the repeat function that when used with one of the keywords define a range
<dael> astearns: Obj?
<dael> RESOLVED: Add two numbers to the repeat function that when used with one of the keywords define a range

[oscarotero]

I was about to create an issue for a similar problem until I discovered this. I'd like to suggest the support for min max and clamp with auto-fill and auto-fit:

/** Create a maximum of 5 columns */
grid-template-columns: repeat(min(auto-fill, 5), 500px);

/** Create a minimum of 2 columns */
grid-template-columns: repeat(max(auto-fill, 2), 500px);

/** Create between 2 and 5 columns */
grid-template-columns: repeat(clamp(2, auto-fill, 5), 500px);