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

@shadeed thanks for all the examples in your post!

I’m working through the practical example in 4.2, which (I think) uses grid at larger widths, masonry at smaller widths, but reverts to grid if it contains a `.card-fixed` element. You have example code for one option, and I have tried to work up what it would look like in the other (please let me know if I have incorrect assumptions about the example or my code can be improved)

Your display:masonry version (with my additional comment)

```css
.masonry {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1rem;

  @media (min-width: 700px) {
    display: masonry;
    masonry-template-tracks: repeat(3, 1fr);
    gap: 10px;
    padding: 0;

    &:has(.card-fixed) {
      display: grid;
      /* also reset gap and padding? */
      /* but any grid- or masonry-specific differences are OK */
    }
  }
}
```

My “just use grid” version

```css
.just-use-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1rem;

  @media (min-width: 700px) {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: masonry;
    gap: 10px;
    padding: 0;

    &:has(.card-fixed) {
      grid-template-columns: 1fr;
      grid-template-rows: none;
      /* also reset gap and padding? */
      /* and reset anything else in grid that differs */
    }
  }
}
```

To my eye the nested grid-masonry-grid decisions look more clear and simple with a display change.

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


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

Received on Thursday, 31 October 2024 20:32:06 UTC