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

301–310 of 359 posts

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

#301

Post by JoshTriplett »

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…

Why does this require checking every item in every column? It looks like the layout algorithm greedily picks the column with the least total height so far, every time it adds an item.

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

#302

Post by reactordev »

fatbuoy1 wrote: post #251
reactordev wrote: post #239

Earlier quoted context omitted.

CSS Grid is a mistake. Baking in a design philosophy when we had really creative pages without it. I like grids for pages with content and documentation and such. I don’t like grids for pages of media or other creative content. Cards, flex box, grids, these are all design framework choices and shouldn’t be in CSS spec. We were totally fine with position relative and media-query centric widths and heights. I get that…

Sure what was wrong with table layouts and spacer gifs anyway amirite? I’m a designer who codes, and CSS Grid has completely transformed (and simplified) my approach to responsive web design, and enabled much more complex layouts as a result. Just because a layout was possible before doesn’t mean it was easy. By all means do things the old way if you want, but to suggest that it would be better if it didn’t exist is…

Not that it wouldn’t exist. It just wouldn’t be part of the spec. You are free to declare your own grid.

I’m also not advocating to bring back tables and invisible spacer gifs. We have margins and padding for that. Even borders…

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

#303

Post by reactordev »

rhdunn wrote: post #240
reactordev wrote: post #239

Earlier quoted context omitted.

CSS Grid is a mistake. Baking in a design philosophy when we had really creative pages without it. I like grids for pages with content and documentation and such. I don’t like grids for pages of media or other creative content. Cards, flex box, grids, these are all design framework choices and shouldn’t be in CSS spec. We were totally fine with position relative and media-query centric widths and heights. I get that…

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.

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

#304

Post by JamesSwift »

pavlov wrote: post #60
afavour wrote: post #44

Earlier quoted context omitted.

It’s almost - almost! - as if the designers of Unix and of CSS work in completely different scenarios and with completely different constraints! Almost!

And with this convenient domain excuse, CSS has managed to become a system that’s not a fit for any domain. It’s incomprehensible to visual designers, incomprehensible to programmers, and incomprehensible to document authors. On the upside, it provides a massive moat of sunk cost and implicit implementation dependency around Chromium, so at least there’s that.

HTML and CSS were created in a time where the entire point was to provide marked-up documents to be read. Now the browser is mainly a generic application runtime.

Its like if the terminal was actually now mostly a video player and people complaining about how awk and sed are tough to use against video frames.

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

#305

Post by JamesSwift »

risenshinetech wrote: post #237
hombre_fatal wrote: post #198

Earlier quoted context omitted.

Well, at least show us your ideal replacement for that logic that's more intuitive. Until then, these complaints usually cash out into unfamiliarity + assuming it's very hard to understand if you were you trying to understand it. Declarative UI is a very hard problem, so it's not always going to be `text-decoration: underline`.

Many things are hard problems, but you don't need to be an expert to recognize an obviously bad solution. If you had showed someone the first bicycle, and it came with 3 differently sized wheels and a spike for a seat, you wouldn't have to provide an "ideal replacement" to know that it was a bad design.

Which part of this is the spike for a seat?

> grid-template-columns: 14ch repeat(auto-fill, minmax(28ch, 1fr)) 14ch;

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

#306

Post by beardedetim »

krsdcbl wrote: post #256
nightpool wrote: post #185

Earlier quoted context omitted.

> If there were a separate display mode, then you'd have to repeat the grid-column specification for the masonry layout, which seems a shame. Why? What's the downside to reusing grid-column-template or whatever for the CSS Masonry spec?

my thoughts exactly - i think this points to a possible naming issue, since "masonry" is a relatively vague alias that does not really describe the underlying layouting logic, it just became ubiquitous enough for people building webstuff to understand because of that one jQuery plugin back in the days. A better approach might be to lean on the "grid" naming, but still silo it off via an own display directive (a bit l…

I really like this concept of `flex-grid` because that's exactly what this display would be.

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

#307

Post by bfgeek »

JoshTriplett wrote: post #301
bfgeek wrote: post #264

Earlier quoted context omitted.

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…

Why does this require checking every item in every column? It looks like the layout algorithm greedily picks the column with the least total height so far, every time it adds an item.

The requires it for sizing the columns (the step before placing the items into the columns).

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

#308

Post by threeseed »

phkahler wrote: post #178
PullJosh wrote: post #115

Earlier quoted context omitted.

As I understand it, the hard part of a masonry layout is ensuring that items are laid out with the first items near the top of the screen and the last items near the bottom of the screen. If you just plop your items into columns, the first items will all appear in the first column and the last items will all appear in the last column (left to right), which is not the behavior you want. To my knowledge, the correct be…

If people want to choose where things land they can do that. Therefore I assume we're talking about a scenario where the items are not known in advance - i.e. they come from a database query or similar. Is there no way to SELECT every Nth item when doing a query? Return a count and select where count MOD N = k? Dump those in a column. This feels like "I want my layout algorithm to be part of the standard." and if you…

But what if you resize the browser or turn the screen on your iPad.

Would you really want that to trigger an entirely new set of SQL statements ?

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

#309

Post by Menu_Overview »

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.

If you read it to the end, you'll see their note on the name. That is also something they want up for debate.

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

#310

Post by somishere »

ThatMedicIsASpy wrote: post #53

I already use this. On Firefox I just enable it in the options and make use of it for my bookmarks. On Mobile this isn't an issue since it's just stacked on top of each other (no about:config on mobile). The last image has it turned off. https://imgur.com/a/o7OyZEW

Try Firefox beta on mobile :)
Post reply on HN