w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.36k stars 641 forks source link

[css-grid-3] Repeat range #9325

Open fantasai opened 10 months ago

fantasai commented 10 months ago

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 commented 8 months ago

Proposed syntax:

repeat( [ auto-fill | auto-fit ] && <number>{1,2} , ... )
css-meeting-bot commented 8 months ago

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

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