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

Doing some analysis of the issue, we believe that whatever behavior is expected from the alignment properties it can be accomplished by aligning _stacks of items_ as a whole.

Just to confirm that we share the same understanding, we consider that a _stack of items_ is a group of all contiguous single-track items contained between the boundaries of either the masonry container or an item spanning multiple tracks. In the following figure, we highlight all different stacks of items in pink.

![stack-example](https://github.com/user-attachments/assets/ad6c561d-d37f-4898-afea-a3863bd5725f)

Regardless of whether we want to align the stacks as a whole or only the first/last item within them, keeping track of these stacks is required in some capacity and it shouldn't shift layout.

On the other hand, we believe that allowing self-alignment outside of these stacks will be problematic and should be avoided. Consider the following example:

![opposing-alignment](https://github.com/user-attachments/assets/691a8157-36a1-41f7-bc73-30b6312c4fd1)

The pink and blue items have opposing alignment properties which have a non-intuitive interaction with each other. It only gets worse if we add more items to the stack _pushing_ each other.

We think that aligning the stacks as a whole is a superset of aligning the first/last item in a stack and should suffice to address the most interesting use case of avoiding holes between items or ragged edges at the end of the stacking axis. 

In order to avoid ragged edges at the end, one could expect align-items-last to control the behavior of the last stack in each track. Note that Tab’s proposal of keeping everything aligned as start, while making only the last item in the stack stretch is a definable behavior for the whole last stack. However, we also picture an alternate version that stretches all items in the stack proportionally:

![alignment-proposal](https://github.com/user-attachments/assets/1c343e4b-e8f3-4e35-a0ba-eebe4d617cec)

Another example, avoiding holes using the align-items-all for stacks in the middle:

![alignment-all-proposal](https://github.com/user-attachments/assets/be4f84d6-4acc-4c6c-a181-0cc29e8c7071)

Finally, without more concrete use cases for other property values, we don’t see how center or end make sense. We believe we only need to define some stretching capability to address gaps and revisit whenever is necessary.

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


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

Received on Monday, 16 December 2024 20:44:32 UTC