[css-grid-3][masonry] integration of alignment and spanning items

[hunboy]

Currently, when we have a masonry layout with justify-tracks in dense mode, the elements overlap the hanging span-ed element. In ideal case this should apply the hanging element as well during justifying.
This affected with these values: center, end, left, right, space-between, space-around, space-evenly.
it works well with normal and start values.
Clarify this issue and honour hanging elements as well during justifying.

In the testcase the "2" element is the hanging one.

default case:
https://jsfiddle.net/utasir/mnuds6vz/1/

good for some reasons:

overlaps:

overlaps:

With this special testcase should be start<->center<->end, because width: max-content defined. But currently not. I didnot find any explanations for the span elements in the spec.

If dense is not defined, this issue still happens, but in my opinion that should be a different ticket

[hunboy]

Authors are advised to be careful with using alignment values other than start when some items span more than one track, because it’s easy to cause items to unintentionally overlap in this case.

I found this in spec finally, so would be good to apply the span element with a nearest position instead of any overlapping

[hunboy]

possible fix emulation when the track aligned to right

when doesnt fit:
https://jsfiddle.net/utasir/mnuds6vz/3/

when fits:
https://jsfiddle.net/utasir/mnuds6vz/4/

aligned to center:
https://jsfiddle.net/utasir/mnuds6vz/5/

[MatsPalmgren]

Masonry layout doesn't have an exclusion model to prevent items from overlapping when applying alignment in the masonry axis (justify-tracks/align-tracks). Each track aligns the items that starts in it. It doesn't take items that starts in other tracks and span into its track into account at all. (The spec warns that it's easy to make spanning items overlap and advice against using alignment in the masonry axis in this case.)

honour hanging elements as well during justifying.

I guess this issue is a feature request to spec an exclusion model for the alignment that would avoid causing spanning items to overlap.

[hunboy]

Introducing subtracks: the span elements determine subtracks inside the track. Note that we suppose that the dense behavior is implemented in the browser. We make dfference between the first, inbetweens and the last subtracks. This picture shows how the justify-tracks: space-between should work:

Where guttermultiplier is the total number of gutter inside the subtrack.

Summary: We have predeclared gaps for the elements and we add additional 2-2 gutters before to each elements.

space-between:

• the start track's first item has no gap predeclared and we don't add gutter at all.
• the end track's last item has no predeclared gap and we don't add gutter at all.
• to all of other items we have 1 gap predefined and we add 2-2 gutters

space-around:

• the start track's first item has half gap added by us and we add only 1 gutter
• the end track's last item has half gap added by us and we add only 1 gutter
• to all of other items we have 1 gap predefined and we add 2-2 gutters

space-evenly:

• the start track's first item has 1 gap added by us and we add 2 gutters
• the end track's last item has 1 gap added by us and we add 2 gutters
• to all of other items we have 1 gap predefined and we add 2-2 gutters

The working demo:
https://jsfiddle.net/utasir/awp3du4x/
In the fiddle the css part is mostly for emulate the dense behavior, irrelevant for the suggested algorythm.
The js part contains 7 functions. Note that the inbetween subtracks are justified in a same way for all cases, so we don't need 9 functions, We only need handle the periferial subtracks only.
The subtracks should come from the dense algorythm, that determines which item is for which subtrack.

[hunboy]

conclusion:
some common usage sample:
https://jsfiddle.net/utasir/w4mf0s15/

I just would like this basic and common layout as reduced holes as possible with masonry

[hunboy]

I've just detected if we already have subtracks defined for paged media. (e.g. 1000 items in a masonry track separated to subtracks for each page) so this sounds a possible solution.

[fantasai]

The justify-tracks property has been dropped from the masonry layout proposal, but definitely if we ever define such a feature we would make sure to avoid overlap! There's some discussion about how the various alignment properties should work in masonry layout, so keeping this issue open to track. See also #10275

If you have use cases to add to #10233 btw, that would be super helpful!