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

321–330 of 359 posts

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

#321

Post by wruza »

turboat wrote: post #193

Suppose we could create a backwards-incompatible system to replace CSS. How would we do it? Are there any books or papers on how to create a coherent layout system? What about alternatives like Qt, Tk, SwiftUI, etc.? I've never used anything besides CSS. Are any of the actually-implemented systems in the wild better? If so, what makes them better? I want a system that provides a better interface for developers, but h…

Not particularly anti-css, but you may be interested in concepts like size groups, properly predictable size-request-allocate cycle, width-for-height, constraint- and align-based layouts and in generally cleaning up the mess of non-orthogonally connected ideas in css. More explicitness and separation for properties. Remove bs like negative margins, make all distances multi-level, e.g. padding = max(el.paddings[]). Make bounding boxes explicit, make borders proper elements, etc. Boxing isn’t a bad model, CSS is just an awful implementation of it. Absolutely ridden with fragile incantations and absurd limitations which bring more issues and “solutions” that will break 99% of the times you touch it.

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

#322

Post by yashap »

yau8edq12i wrote: post #290
layer8 wrote: post #277

Earlier quoted context omitted.

Some people want to go systematically over the items when exploring. I certainly tend to operate that way, and it’s infuriating when the UI is making it difficult for no good reason.

I guess in that case you can just browse other websites. No website can pander to everyone.

Not sure why you’re being downvoted, it’s true. If you want to display items (normally images) with different dimensions, while respecting their natural height/width ratios, you really have 2 options:

1) Fixed height rows: lower information density (excess white space around some of the items), but easier to scan systematically

2) Masonry layout: higher information density (no excess white space around items), but harder to scan systematically

Nobody is “right” here, it’s simply user-by-user preferences about what you prefer.

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

#323

Post by pier25 »

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…

I don't know about the implementation but it makes zero sense that masonry should be part of grid. It's not a grid!

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

#324

Post by danielheath »

yurishimo wrote: post #298
laszlokorte wrote: post #270

Earlier quoted context omitted.

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.

`@supports masonry { shared-property: 1; }`

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

#326

Post by zarzavat »

seanclayton wrote: post #120
baryphonic wrote: post #40

Earlier quoted context omitted.

> No declarative language can ever handle every use case. Prolog would beg to differ.

So would LISP, Haskell, and Erlang.

Declarative in this context means no recursion or infinite loops. So none of these are declarative.

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

#327

Post by bazoom42 »

crispyambulance wrote: post #296
bazoom42 wrote: post #257

Earlier quoted context omitted.

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. Whol…

It is still not clear to me why you discount display:table as a valid and useful tool for placing content in a grid.

Sure, it is not as sophisticated as Display:grid eg it doesn’t support changing the number of columns depending on the viewport width and it doesnt support elements overlapping multiple grid cells. But many common “full-page” layouts, like header, sidebar, footer can be expressed using “display:table”.

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

#328

Post by rhdunn »

reactordev wrote: post #303
rhdunn wrote: post #240

Earlier quoted context omitted.

CSS grid makes it possible to implement wrapped content that is uniformally aligned with the last row keeping the same number of columns as the others, and have that scale correctly to different page widths. This is useful in things like book layouts. You can get close with flex, but the last row doesn't fully work.

Does it require a ::last-child hack to get working? I’m a fan of grids when it comes to heavy writing content like I mentioned but I still don’t think it should all be packed in the spec.

No, just:

    main.books {
        display: grid;
        grid-template-columns: repeat(auto-fill, 180px);
        grid-gap: 1rem;
        justify-content: space-between;
    }
That will make the child items 180px wide, repeat as many children in a row as needed to fill the width with a gap of atleast 1rem extended so that the items are justified to the left and right and are spread evenly. The last row has however many children are left with those children positioned to match the rows above.

See https://stackoverflow.com/a/46099319.

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

#329

Post by [deleted] »

mattbessey wrote: post #17

> This layout creates uniformly-sized columns, without any rows I find it amusing that they've decided to refer to this as masonry layout. If you actually built a wall like this (as opposed to uniformly-sized rows , without any columns ) it would be a structural engineering disaster.

[deleted]

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

#330

Post by account42 »

yashap wrote: post #322
yau8edq12i wrote: post #290

Earlier quoted context omitted.

I guess in that case you can just browse other websites. No website can pander to everyone.

Not sure why you’re being downvoted, it’s true. If you want to display items (normally images) with different dimensions, while respecting their natural height/width ratios, you really have 2 options: 1) Fixed height rows: lower information density (excess white space around some of the items), but easier to scan systematically 2) Masonry layout: higher information density (no excess white space around items), but ha…

It doesn't even make efficient use of space because the size of items depends on their aspect ratio. Fixed size cells is a much more sensible approach.
Post reply on HN