Re: [csswg-drafts] [css-grid-3][masonry] Masonry Syntax Designer/Developer Feedback (#11060)

Use of `masonry`, regardless of syntax or naming, goes beyond a "Pinterest design." Its capabilities will remain relevant and in demand over the long term, for example:

Desktop:
![desktop](https://github.com/user-attachments/assets/c3e6a908-a600-45f6-9a3f-beb6380ec791)

Mobile:
![mobile](https://github.com/user-attachments/assets/c8efeb8f-0beb-4fd7-a91b-24ef912d2780)

A simple example with three blocks: text, button, and image.

On desktop the button is positioned above the bottom edge of the image, so using `grid` won’t work here. Two columns are needed: one for the text and button, and the other for the image.

On mobile the image is placed between the text and button, and there’s no simple way to move a block from one column to another.

One approach is to use `display: contents;` on the columns and reorder the elements, but this can make the CSS harder to read. Another option is to add two identical images in the HTML and show/hide them depending on screen size, though this isn’t an ideal solution either.

`masonry` makes this very easy.

New Masonry Layout:
```css
.masonry {
  display: masonry;
  masonry-template-tracks: 50% 1fr;
  @media (width <= 992px) {
    display: block;
  }
}
```

Just Use Grid:
```css
.just-use-grid {
  display: grid;
  grid-template-rows: masonry;
  grid-template-columns: 50% 1fr;
  @media (width <= 992px) {
    display: block;
  }
}
```

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


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

Received on Tuesday, 12 November 2024 13:00:38 UTC