1607439 - [css-grid-2] Masonry layout discussion bug

Status: RESOLVED FIXED

(Core :: Layout: Grid, task)

Description

[Robert Utasi [:hunboy]]

Attachment: First testcase: 2columns accordion concept

Hi Mats

This is a discussion bug filed for planning masonry

First testcase is an accordion. click on the summaries.
As you can see it has 2 columns. The current defect is: when you open a details, that affects the other column as well.
Plan: only affects 1 column as masonry. Without reordering the items between the columns.
Requests: flat datastructure means no wrapper in it, neither display: contents nor subgrid.

Let's think of it :)

Thanks

Comment 1

[Robert Utasi [:hunboy]]

Attachment: Intercative Mockup - masonry with vertical axis

The final goal is: this layout WITHOUT wrappers (so no subgrids) by using masonry

Comment 2

[Robert Utasi [:hunboy]]

Attachment: Interactive Mockup - masonry with horizontal axis

The Final goal is: this mockup WITHOUT wrappers, and without writing-mode trick
supposed by using justify-content: start | center | end | stretch

Comment 3

[Mats Palmgren (inactive)]

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.)

Comment 4

[Mats Palmgren (inactive)]

There is now a CSS draft spec for masonry layout: https://drafts.csswg.org/css-grid-3/
Please open csswg github issues as usual to suggest changes/additions to that spec. Thanks.

(If you find any implementation bugs, then please file bugs here as usual, in the Layout:Grid component.)