Thanks for the testcases. So, in the first testcase you should be able to use `grid-template-rows: masonry` on the container and then add the rule `#masonry > :nth-child(2n+1) { grid-column: 1; }` to force those items to stay in the first column when the size changes (when you open the details). This seems to work fine in my local build.
In the 2nd testcase, it seems the goal is to align each column vertically independently? If so, this isn't supported by the proposal I made at https://github.com/w3c/csswg-drafts/issues/4650. I suggested we align the content area as a whole, like in the block-axis for a block. But perhaps per axis alignment is actually a better default. I added a note in the github issue about this.
(The 3rd testcase is basically the same as the 2nd - alignment in the masonry-axis.)
Bug 1607439 Comment 3 Edit History
Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.
Thanks for the testcases. So, in the first testcase you should be able to use `grid-template-rows: masonry` on the container and then add the rule `#masonry > :nth-child(2n+1) { grid-column: 1; }` to force those items to stay in the first column when the size changes (when you open the details). This seems to work fine in my local build.
(EDIT: you need `#masonry > :nth-child(2n) { grid-column: 2; }` too of course.)
In the 2nd testcase, it seems the goal is to align each column vertically independently? If so, this isn't supported by the proposal I made at https://github.com/w3c/csswg-drafts/issues/4650. I suggested we align the content area as a whole, like in the block-axis for a block. But perhaps per axis alignment is actually a better default. I added a note in the github issue about this.
(The 3rd testcase is basically the same as the 2nd - alignment in the masonry-axis.)