Re: [csswg-drafts] Alternative masonry path forward (#9041)

Like many commenters above, I find display: masonry to have clearer ergonomics (a grid-based design, to me, has underlying rows and columns).  In addition, display: masonry would make a progressive enhancement approach cleaner (imho) for designs where the preferred fallback is Flexbox (or anything other than Grid):

### display: masonry, fall back to Flexbox
```
/*All of the rules for this class are in the same place*/
.masonry {
   display: flex;
   flex-wrap: wrap;
  /*The following lines will be ignored by browsers that don't understand masonry 
   and applied by browsers that understand masonry, overriding the previous lines*/
   display: masonry;
   masonry-template: repeat(auto-fill, auto);
}

```
### masonry as part of Grid, fall back to Flexbox
```
/*Rules for the class are split across different layers/queries,
resulting in bulkier CSS and making it less efficient to update*/

/*Media queries do not increase specificity, 
so make sure fallbacks are deprioritized*/
@layer fallbacks { 
   .masonry {
      display: flex;
      flex-wrap: wrap;
   }
}

@supports (grid-template-rows: masonry) {
  .masonry {
      display: grid;
      grid-template-rows: masonry;
  }
}

```

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


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

Received on Friday, 27 September 2024 20:04:39 UTC