[css-grid-3] Add a keyword for setting masonry-slack to infinity

[Loirooriol]

I would have preferred to discuss this in #10232, but I was on vacation. So as Alan mentioned during the call, I'm filing this as a separate issue.

My point is that an infinity value for masonry-slack, unlike any other value, provides a stable layout that doesn't mess with the order when items change their size.

This is also an option that is exposed by the most widely used masonry frameworks. Just with a quick search I could find:

• https://masonry.desandro.com/options#horizontalorder
• https://github.com/bigbite/macy.js?tab=readme-ov-file#trueorder
• https://mui.com/material-ui/react-masonry/#sequential
• https://github.com/Spope/MiniMasonry.js#parameters

And it's very telling that authors are actively requesting it, as @desandro mentioned in #10233 (comment)

A good amount of people requested that Masonry have more leeway in its layout algorithm so that horizontal order could be maintained. I eventually added a horizontalOrder option to Masonry.

Then, sure, authors could use masonry-slack: calc(1px / 0). But this has some problems:

• It's not clear what it does
• It's very difficult to search
• It's not unique (some people may use calc(infinity * 1px), or other calculations)
• It's harder to teach

So I do think we need a keyword for this. We could go with masonry-slack: infinite (a la animation-iteration-count), or maybe think a name that is more descriptive of the provided behavior, I don't mind.

[tabatkins]

Ooh, thanks for the references! Yeah, we definitely should make this easy, then.

I agree that using the keyword infinite is the best way to do it.

[tabatkins]

Okay, added.

@fantasai and I are of the opinion that this is probably requested so often because none of the masonry libraries have a concept of slack at all (which is so weird to us), but still, there are use-cases that might reasonably demand it.