Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout

webkit.org

Post reply on HN
Print view View original

291–300 of 359 posts

Re: Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout

#291

Post by jampekka »

rezonant wrote: post #249
jampekka wrote: post #89

Earlier quoted context omitted.

JS masonry libraries, e.g. masonry.js, can and typically do use the HTML for the content and just lay it out similarly to what CSS does.

But the screen size is an important part of how the library will lay out the bricks, and that isn't known until JS runs (this can kind of be done with client hints, but not on initial page load)

I was referring to the document still having the semantic structure. E.g. masonry.js also supports relative sizing, so it doesn't need to know the screen size beforehand.

Re: Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout

#292

Post by FireInsight »

SassyBird wrote: post #197

Reposting as a top comment for more visibility: I have a website with my photos, which doesn’t use any JS for layout. When I was making it, I considered using JS masonry libraries, but I wasn’t satisfied with the results. Proper masonry layouts which fill all available space in practice actually crop some images. Leaving space around photos is required when you don’t want cropping and want to preserve aspect ratio. T…

You could probably have done this layout in a couple lines of CSS with a row-oriented flexbox that wraps and is center-aligned. That would be the more standard way to do it too.

Re: Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout

#293

Post by fantasai »

bfgeek wrote: post #264
achairapart wrote: post #116

So, the background story is that CSSWG DevRels from browser vendors are debating how to formally include the Masonry layout into CSS, at least since 2020, when Firefox first proposed it. The news here is that people at WebKit decided to push the debate to the public, inviting designers and developers to take some action (“post to social media, write blog posts”), in order to get past this. While it may look just like…

Part of the tension with building masonry on top of grid is that they work in fundamentally different ways. Grid you place everything in the grid first (e.g. an item goes in col:2,row:3), then size the grid. Masonry ideally you want to size the tracks first, then place items in those tracks. The first Firefox implementation (and the spec at that stage) basically said you don't consider any masonry items for sizing tr…

Quadratic performance is a bit of an exaggeration. It's not O(N_items^2). It's N_tracks x N_items, and basically nobody has N_tracks ≈ N_items. Practically speaking, the upper limit is closer to (N_items^1.5) because N_tracks is unlikely to go over sqrt(N_items) in cases where N is large. And almost all of those layouts will have repetitive track sizing patterns, so they can be optimized to a much smaller N_tracks that approaches O(N_items).

Re: Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout

#295

Post by jampekka »

bazoom42 wrote: post #257
crispyambulance wrote: post #229

Earlier quoted context omitted.

Yeah, I remember those. It was intended as a way to make "tables" using divs. That way, we could pretend to do page layout with CSS, while still feeling shitty about repurposing something meant for tables. There's just no justifiable reason for putting whole-page lay-out on the back-burner for so long. So many other far less important things came out before grid, it feels almost like it was deliberately spiteful to d…

Why would you feel shitty about using ‘display:table’? It puts things into a freaking grid as you asked for.

There was a huge cargo cult adamantly against using tables back in the day, even though the "true way" of hacking divs with float and clearfixes and invisible images was totally broken. Somehow having bunch of wrapper and empty divs was "more semantic" or something.

I was in the cult. It was totally inane, but seems to carry some effects to this day.

Re: Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout

#296

Post by crispyambulance »

bazoom42 wrote: post #257
crispyambulance wrote: post #229

Earlier quoted context omitted.

Yeah, I remember those. It was intended as a way to make "tables" using divs. That way, we could pretend to do page layout with CSS, while still feeling shitty about repurposing something meant for tables. There's just no justifiable reason for putting whole-page lay-out on the back-burner for so long. So many other far less important things came out before grid, it feels almost like it was deliberately spiteful to d…

Why would you feel shitty about using ‘display:table’? It puts things into a freaking grid as you asked for.

For a long time, css was a huge step backwards from what we were accustomed to with desktop application layout mechanisms.

Web-apps were "a thing" starting in the very early naughts, yet just getting stuff to stick where you wanted it on web page required a bunch of stupid hacks and accommodations. Of course people resorted to using tables for page layout. The display:table thing was just a continuation of that.

Whole-page layout should have been an absolute top priority for the folks that controlled css, yet it seems they just didn't care until grid finally came out in 2017-ish? I just don't understand why that is.

Re: Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout

#297

Post by falcor84 »

Izkata wrote: post #283
achairapart wrote: post #116

So, the background story is that CSSWG DevRels from browser vendors are debating how to formally include the Masonry layout into CSS, at least since 2020, when Firefox first proposed it. The news here is that people at WebKit decided to push the debate to the public, inviting designers and developers to take some action (“post to social media, write blog posts”), in order to get past this. While it may look just like…

> new proprieties I'm guessing this was going to be "properties"? It kinda looks like "proprietary" instead, so let's double down on that - I propose "display: tetris;"

I would suggest that `display: tetris;` is implemented such that each row SHOULD have whitespace, and if at any point a row becomes fully occupied, a conforming rendering agent MUST remove the entire row.

Re: Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout

#298

Post by yurishimo »

laszlokorte wrote: post #270
matsemann wrote: post #268

Earlier quoted context omitted.

I think one additional point to consider when adding it as a new display mode vs re-using grid, is that currently these demo's fallback quite nicely now when it's re-using grid. Instead of showing it as masonry (since my browser doesn't support it), it at least behaves as a grid. If it's a new display: X property, it will fallback to div behavior with the content all over the place in unsupported browsers.

you could simply do: "display: grid; display: masonry;" and all not-supporting browsers would skip the second declaration.

This is assuming there isn’t any cross pollution of shared properties either.

Re: Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout

#300

Post by flakiness »

achairapart wrote: post #116

So, the background story is that CSSWG DevRels from browser vendors are debating how to formally include the Masonry layout into CSS, at least since 2020, when Firefox first proposed it. The news here is that people at WebKit decided to push the debate to the public, inviting designers and developers to take some action (“post to social media, write blog posts”), in order to get past this. While it may look just like…

If there is a debate, who is pushing back? Or is it more about details while every vendor is supportive at high-level?
Post reply on HN