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

241–250 of 359 posts

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

#241

Post by turboat »

pphysch wrote: post #206
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…

CSS is overall pretty great and I've seen at least a couple non-web GUIs rip out their bespoke GUI systems and replace them with CSS or something very much like it. I think the big change will be better support for hierarchical definitions, including but not limited to nesting. TFA discussion would be pretty moot if there were namespaced properties that could somehow fit under display: masonry; rather than polluting…

I have to assume that's partly because of the availability of implementations, tooling, and developer familiarity. Many platforms will let you toss in a web view, and if you want to set up e.g. a configuration screen with text and toggles, HTML/CSS will get the job done, more easily than maintaining a custom system that's peripheral to the core purpose of your app.

I don't want to be overly negative, but I just can't view CSS as "pretty great."

I appreciate the inherent difficulty of using 1-dimensional static text to specify a 2-dimensional dynamic layout. Still, basically every programming problem involves defining abstractions over some domain concept and expressing that in the syntax of your programming language. Somehow that's harder in CSS than any other language I've used.

Within web dev I find both HTML and JS much easier to work with, despite their imperfections.

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

#242

Post by joenot443 »

cfj wrote: post #28
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.

Probably influenced by the most popular JavaScript library for achieving this type of layout, Masonry[0]. The author notes at the end of the article: > But do expect the name of this value to change in the future. And perhaps prepare for a future where we call this “columnar grid” or “Grid Level 3” instead of “Masonry”. [0] https://masonry.desandro.com/

I expect this is the case, if I had to describe that layout in iOS-land I'd also call it "masonry".

It's a pretty common descriptor in the Wordpress world - grids/scrapbooks will often have masonry as one of their layout styles. Maybe 100 years from now when people are browsing in their neurodisplay they'll be able to think "masonry" and have their photos tile the way they like, never having heard of Javascript or CSS in their lives. Language is neat like that.

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

#244

Post by datagram »

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…

Flexbox was designed for these kinds of layouts, so that would also be an option here.

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

#245

Post by treflop »

georgesimon wrote: post #223
treflop wrote: post #203

Earlier quoted context omitted.

Masonry just refers to working with bricks. It's old as time but we still make stuff out of bricks and you can still be a mason today. https://en.wikipedia.org/wiki/Masonry

It seems your are saying it is only relates to bricks? But it's not, it's any stone, cut or formed.

I suppose I’m using brick by its informal definition as just a construction block.

https://en.m.wikipedia.org/wiki/Brick

But yes, historically brick meant just one type and style of material.

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

#246

Post by turboat »

legulere wrote: post #210
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…

I think one classic book about it is "Rastersysteme für die visuelle Gestaltung - Grid systems in Graphic Design". Never read it though.

Thanks for the reference.

As I've been thinking about this, I do wonder if starting with grids as the foundation would have been a better approach. As I understand it, early CSS focused on stuff like color and font style, with primitive layout tools. Over time better tools have been bolted on, but it's messy.

Say we merged flexbox and grid into a unified system, and threw away the other layout algorithms. At the same time, made some tweaks to clarify margin, border, padding, and overflow. Maybe that's a good foundation.

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

#247

Post by amadeuspagel »

t_mann wrote: post #156

I really like the general look and feel of masonry/waterfall layout, maybe it's because I grew up reading physical newspapers (and still do), but to me a columnar layout is just an intuitive way to divide up a page. I just wish there was an alternative to the default masonry ordering, which afaik is a simple rule that goes sth like 'place the next item in whichever column it can go up highest'. This means that the le…

I'd only use a masonry layout for something where there's no "clear" order anyway. I wouldn't use it for chronologically sorted images.

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

#248

Post by amadeuspagel »

account42 wrote: post #222

I absolutely hate this kind of layout, especially when combined with infinite scrolling. Makes it impossible to systematically go over all items.

It's not meant for things that you want to systematically go over, it's meant for things that you want to explore.

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

#249

Post by rezonant »

jampekka wrote: post #89
rezonant wrote: post #58

Earlier quoted context omitted.

Such browsers can also get by based on the semantic ordering of content within the document, which will more closely match the visual reality when a masonry type layout is used. The alternative of defining several columns leads to at least one column being shoved all the way at the end of the document after the previous column, whereas in a masonry layout that wouldn't be the case. This is where a proper solution to…

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)

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

#250

Post by rezonant »

ptx wrote: post #139
rezonant wrote: post #24

Earlier quoted context omitted.

So you're saying the a11y tree and tab ordering is bypassing the actual ordering of content and instead traversing the columns one by one? I'd call that a bug. In a masonry layout the expectation of a sighted user is that there is no continuity from column to column, but instead through the visual line. And the "unexpected" (disagree) ordering you show does that. I think the issue would be that tab ordering is ignori…

Maybe it's just me, but as a sighted user I have no idea how to read this kind of layout. My expectation would be that any sane designer wouldn't use this kind of layout in the first place. What's the "visual line" in the first example? It goes 1, 2, 3, 4; then down to 5; then a sudden break in the line as it jumps over 3 to the left to reach 6? Are we supposed to mentally sort the boxes by the top edge coordinates b…

Well no, the idea is that these are not related pieces of content. It's less of a newspaper article and more about independent items that are placed across the page. You don't have to follow the flow exactly as a user, but following the visual line is "more correct" than following through all of column A, then column B, etc.
Post reply on HN