← Back to context

Comment by ThatMedicIsASpy

5 days ago

I've run the masonry layout (for my personal bookmark website) ever since I've found it in the browser settings.

grid-template-rows: masonry;

is going to be outdated then?

15 comments

ThatMedicIsASpy

Reply
miiiiiike  5 days ago

Yeah, there was a years long debate that effectively ended with: “We held a vote that you weren’t aware of and decided that masonry was out. If you cared, you should have participated in the vote that you were not aware was happening. It’s too late to change it.”

https://m.youtube.com/watch?v=yikbSQ6tvlE

  • JimDabell  5 days ago

    > We held a vote that you weren’t aware of and decided that masonry was out. If you cared, you should have participated in the vote that you were not aware was happening. It’s too late to change it.

    I think that’s an exceptionally uncharitable description of what happened. This is a decision the WebKit team has been repeatedly publicly asking people to participate in for over 18 months.

    > Help us invent CSS Grid Level 3, aka “Masonry” layout

    > P.S. About the name

    > It’s likely masonry is not the best name for this new value. […] The CSSWG is debating this name in [this issue]. If you have ideas or preferences for a name, please join that discussion.

    — https://webkit.org/blog/15269/help-us-invent-masonry-layouts...

    > Help us choose the final syntax for Masonry in CSS

    > We also believe that the value masonry should be renamed.

    > As described in our previous article, “masonry” is not an ideal name, since it represents a metaphor, and not a direct description of its purpose. It’s also not a universally used name for this kind of layout. Many developers call it “waterfall layout” instead, which is also a metaphor.

    > Many of you have made suggestions for a better name. Two have stood out, collapse and pack as in — grid-template-rows: collapse or grid-template-rows: pack. Which do you like better? Or do you have another suggestion? Comment on [this issue] specifically about a new value name (for the Just Use grid option).

    — https://webkit.org/blog/16026/css-masonry-syntax/#footnote-1

    > [css-grid-3] Renaming masonry keyword

    — https://github.com/w3c/csswg-drafts/issues/9733

    • miiiiiike  5 days ago

      The debates went on for years and following it closely became a poor use of time. Even the subgrid conversation seemed completely stalled. I think a lot of people tuned out long before any vote was discussed. I did.

      4 replies →

  • culi  5 days ago

    Wasn't Firefox the only browser that actually implemented `grid-template-rows: masonry` anyways?

    It sucks whenever browsers backtrack on a W3C standard that reached "Working Draft" status but it doesn't seem like it's gonna impact many people

    Besides, it's not being "deprecated". It will continue to work as it does. We just have a better alternative that the big 3 all agreed on.

  • afavour  5 days ago

    Masonry was never “in”, no? Mozilla proposed it and were the only ones to implement it, behind a feature flag. Then WebKit proposed an alternative that was discussed at length:

    https://github.com/w3c/csswg-drafts/issues/10233

    • miiiiiike  5 days ago

      People have been dragging their feet on subgrid, masonry, etc for almost a decade. I followed it pretty closely for years but stopped when it started turning into a Christopher Guest mockumentary.

      Masonry or grid-lanes, who cares? I’m just glad masonry (the feature, Baseline 20XX) and subgrid (Baseline 2023) are finally here.

dylan604  5 days ago

I still prefer the layout look from something like justifiedGallery.js where the heights of each row are the same. Actual masonry with stacking stones would never stack directly on top of each other like this. Calling it masonry just feels unnatural as anything stacked like that would easily be knocked over. "Lanes" is definitely more appropriately named than "masonry". The layout look of a justifiedGallery would be more masonry than the grid-template-rows:masonry setting. yeah yeah, raw css vs js library blah blah

  • Doxin  3 days ago

    One hack to almost get a justified gallery like that with no javascript is to lay them out with flexbox, setting their width to a percentage or vw value which your backend calculates based on image aspect ratio and desired image height, use flex-grow to stretch them to fill remaining space, and then using background-position: cover to make the images fit the slightly wrong aspect ratio containers.

    This will of course slightly crop all your images to make it fit, but in practice as long as you keep your image aspect ratios reasonable and the images small enough on the page it's really quite subtle.

    I had hoped that this feature would provide for masonry like that, but one has to make do.

rhdunn  3 days ago

The following should be compatible with both approaches:

    .masonry {
      display: grid;
      display: grid-lanes;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      grid-template-rows: masonry;
    }

Firefox and browsers supporting the old syntax will ignore the `display: grid-lanes` as it doesn't recognize it and fall back to the grid+masonry.

Browsers supporting the new syntax will override the `display: grid` with `display: grid-lanes` and ignore the `grid-template-rows: masonry` syntax.