Re: [csswg-drafts] [css-grid-3] Make align-self/justify-self align including adjacent extra space (#10275)

Theoretically, I am inclined to believe that self-alignment here should be more similar to flexbox in that it only applies in the grid axis given that masonry does not create distinct cells like grid does.

Ignoring this, what Ethan describes seems relatively doable. However, given that we allow dense packing in masonry, this means we'd need to wait to apply self-alignment to items until all items have been placed, as opposed to as soon as a spanner is added that creates space above it.

This is possible, though, if you kept track of the item stacks with open spaces as you perform layout and then apply alignment to those at the end if applicable, but this seems somewhat unfortunate, and this could also lead to layout shifts as new items are added if both self-alignment and dense packing are applied.

I suppose one way to improve that situation is if you make self-alignment in the masonry axis not apply if dense packing is also applied. However, if an author truly didn't want any extra spaces, there are scenarios where a space that cannot be filled by alignment and would need dense packing or item reordering to fill the space:

<img width="218" height="338" alt="Image" src="https://github.com/user-attachments/assets/16493ad2-a73e-4f76-896c-8c8b6ff2c33d" />

For example, in this image, you can fill the space after the first item by stretching it (likely not with dense packing), but cannot fill the remaining open space near the bottom without another single spanning item. So, I can see use cases where an author *might* want both applied at the same time.

In either case, I agree that stretch should be sufficient to handle cases where there are open spaces to fill, and the simplest approach would be to only apply alignment to the last item in a stack, that way when you add a spanner, you just need to look at the item above it in each track it spans, as opposed to all item stacks per track it spans.

-- 
GitHub Notification of comment by alisonmaher
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10275#issuecomment-3169522037 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 8 August 2025 23:33:57 UTC