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

CSS Grid Lanes

webkit.org

Post reply on HN
Print view View original

121–130 of 237 posts

Re: CSS Grid Lanes

#121

Post by snackbroken »

jlaternman wrote: post #94
ray_v wrote: post #82

If I ever encounter, and need to read a webpage with arbitrarily sized and placed grids of text, please somebody just shoot me. https://webkit.org/wp-content/uploads/Grid-Lanes-newspaper-d...

I think this looks great too. Finally replicating the efficiency of newspaper layouts. No enforced symmetry, just content in an optimal space. I want.

It looks pretty, but fails at basic usability.

After reading the top-left block of text titled "Optimizing Webkit & Safari for Spedometer 3.0", what the fuck am I supposed to read next? Am I meant to go recursively column by column, or try to scrutinize pixels to determine which of the blocks are further up than the others, skipping haphazardly left and right across the page? A visual aid: https://imgur.com/a/0wHMmBG

Columnar layout is FUNDAMENTALLY BROKEN on media that doesn't have two fixed-size axes. Web layouts leave one axis free to expand as far as necessary to fit the content, so there is no sane algorithm for laying out arbitrary content this way. Either you end up with items ordered confusingly, or you end up having to scroll up and down repeatedly across the whole damn page, which can be arbitrarily long. Either option is terrible. Don't even get me started on how poorly this interacts with "infinite scroll".

Re: CSS Grid Lanes

#122

Post by JimDabell »

miiiiiike wrote: post #11
ThatMedicIsASpy wrote: post #6

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?

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

> 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

Re: CSS Grid Lanes

#123

Post by pie_flavor »

culi wrote: post #27

Props to the Safari team. They surprised us all when they suddenly shot to the top of interop-2025 this October https://wpt.fyi/interop-2025

My favorite is finally supporting `arbitrary-subdomain.localhost`. Been a real pain in the neck to add Safari-specific fallbacks for my usage of that.

Re: CSS Grid Lanes

#126

Post by gherkinnn »

GaryBluto wrote: post #116

To quote the wise Karl Pilkington: "Do we need 'em?" HTML has become more and more bloated. How many methods do we need to do something that was possible back in the 90s?

There is no winning, is there? Half of HN wants browsers to revert to document readers and the other half wants HTML and CSS to do what JS can. A small minority then insists that we should get rid of HTML and CSS entirely and start from scratch. The louder the ideas the further away the person is from actually using the tech. I personally would not have the patience for community management.

That said, CSS masonry looks solid.

Re: CSS Grid Lanes

#128

Post by satvikpendem »

halapro wrote: post #106
emilbratt wrote: post #56

I always thought that the masonry layout looked good but made it harder to get a good overview of the images.

A lot of web "design" is about how it looks rather than how usable it is. At no point any stakeholder stops and actually uses the product, they scroll up and down, enjoy the pointless "scroll in" animations and say "kewl". Never mind the text that is at 50% opacity until you scroll to the exact intended point, because nobody actually attempted to read it.

> At no point any stakeholder stops and actually uses the product, they scroll up and down, enjoy the pointless "scroll in" animations and say "kewl".

Actually that's exactly what they do. They like the animations while some people, especially devs, do not. But they don't use it multiple times, because they would be able to see how it gets annoying after the first time.

Re: CSS Grid Lanes

#129

Post by satvikpendem »

anonymous908213 wrote: post #112
ethmarks wrote: post #80

Earlier quoted context omitted.

Pointing out that masonry isn't as good with mixed-orientation content as it is with uniform-orientation content is all well and good, but we still need a way to display mixed orientation content. What alternatives to masonry do you propose? - If you stretch all images into a uniform aspect ratio, they get all squashed and look terrible. - If you crop all images into a uniform aspect ratio, you lose potentially the m…

Danbooru[1] and Danbooru-derived image boards handle this perfectly, and are a genuine pleasure to browse relative to the awful experience that is pinterest. There is empty space between images, and that is fine . You don't need to occupy every pixel in the screen to begin with, that's why we have these magical things called "margins", elements need room to breathe in the first place. [1] https://safebooru.donmai.us/…

How is that better? It's still a grid of images that seem to be constrained to a more or less rectangular grid. I'm thinking more of a dynamic grid where there is a mix of sizes of horizontal and vertical images.

Re: CSS Grid Lanes

#130

Post by satvikpendem »

ray_v wrote: post #82

If I ever encounter, and need to read a webpage with arbitrarily sized and placed grids of text, please somebody just shoot me. https://webkit.org/wp-content/uploads/Grid-Lanes-newspaper-d...

Never read a newspaper?
Post reply on HN