[css-grid-3] "Auto-spanning" based on width of an item

[fantasai]

Copying @tabatkins comment:

allow "auto-spanning", where an element will get a span based on its width. This might be a good mode to allow, possibly even with some author control - if an image is >X% of the track width, make it span 2 instead of 1 (or a larger span, as appropriate).

[fantasai]

Presumably for this feature you specify a minimum span, and then allow it to take up more than that.

For Masonry, I think we'd say:

• For the purpose of computing intrinsic track sizes, it's assigned its minimum span.
• When placing the item, if it lands in a track that's too narrow, its span is increased until its min-content contribution fits. This may cause (pick one):
  • The item shifts downward as necessary, but is not re-placed. (Most performant option.)
  • The item is re-placed after its final span is calculated from this initial position, if so dictated by the "place in shortest tracks" rule, but its span is never decreased even if the new tracks are wider.
  • Every time we increase the span by 1 and find its new "shortest stacks" position, we evaluate whether maintaining the span instead, but shifting it to a different, wider set of tracks, would place it higher. If so, we move it to those tracks instead of increasing its span.
• For simplicity, we can say that auto-spanning items don't get dense-packed.

For Grid, here's a first attempt (which may or may not make sense, I'm unsure):

• Preliminary track sizes are calculated as
  1. Start each track with a fixed minimum size at that size, and each track with an intrinsic minimum size as infinity.
  2. Cap tracks with infinite size at their definite maximum, if any.
  3. Find the remaining free space, and maximize any other tracks with a definite maximum.
  4. Expand flexible tracks.
• Using the preliminary track sizes, calculate the spans of auto-spanning items as you place them, starting with the item's inline axis. Items get re-placed if you need a greater span than is available (e.g. due to already-placed items).
• Note that if an intrinsic track has no definite minimum or maximum, it will be treated as infinity, and any item spanning it will be assumed to fit.

I think this would handle most of the straightforward cases? But if you're doing something weird, it'll probably be weird.