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

251–260 of 359 posts

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

#251

Post by fatbuoy1 »

reactordev wrote: post #239
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…

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 insane.

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

#252

Post by chuckadams »

wongarsu wrote: post #66
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.

Maybe there should be a grid-template-masonry-direction? Just quickly surveying a couple of sites, "masonry" and "horizontal masonry" seem to be about equally common. On the other hand horizontal masonry is constructed very differently: Flickr fits thumbnails into a row until it reaches some predefined total length, then scales everything down slightly so the total row width matches exactly (resulting in rows of diff…

Filling rows without any defined columns is more or less what flexbox already does.

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

#253

Post by spintin »

You can very simply do this with javascript.

Browser developers are now reaching for straws to remain employable.

That said the biggest tasks remains:

- Go back to HTTP/1.1 with "One time password" auth.: https://datatracker.ietf.org/doc/html/rfc2289

- Simplify the browser so that it can be compiled in less than many hours on the latest CPU.

- Completely remove the tie-ins to any commercial/governmental entities.

Basically go back to Netscape with some improvements to javascript performance and hardware accelerated rendering of HTML.

Everything else invented in the last 20 years is meaningless. This is valid in most domains: Raspberry Pi is the only real exception.

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

#254

Post by paradox460 »

It feels good to see the webkit team actually doing good, publicly visible work again

When I was cutting my teeth in web design, the early webkit blog and safari releases were always inspirational. The rate at which they pushed out new features in the mid 00s was astonishing

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

#255

Post by The_Colonel »

codingclaws wrote: post #238
The_Colonel wrote: post #219

Earlier quoted context omitted.

That's not going to be responsive which is today a must have.

It is actually responsive, I think because I used percentages in the CSS.

So it makes pictures larger / smaller based on the screen width?

Usually what is expected is that with narrower screen, you get fewer columns, pictures are still same-ish size. You also need to keep the order of the items (e.g. on a wider screen 1, 2, 3, 4 are all on one row, with a smaller screen 1 and 2 are on a row, then 3 and 4 on another row).

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

#256

Post by krsdcbl »

nightpool wrote: post #185
mvonballmo wrote: post #155

Earlier quoted context omitted.

A "row-less" grid fits very well in the current CSS Grid specification, in that it can reuse the very powerful column-definition property as well as sub-grids. Their examples very convincingly show how orthogonal these features are. Mostly, you just write grid-row-template: masonry and everything else just works with it. This is nice. It doesn't become harder to use the grid layout than it already is IMHO. The drawba…

> 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 like "block" and "inline-block" have shared properties, but also mutually exclusive behaviours)

So maybe an own `display: flex-grid;` could be an interesting solution?

This separate layout mode would avoid "result-specific" nomenclature like "masonry", and could lean on both flexbox & grid to achieve that look: - using `grid-auto-flow` to set a "masonry axis" & distribution logic - using _either_ `grid-template-columns` or `grid-template-rows` to specify the "lanes" - and to make my frankensteinian display-mashup even worse (or genius! for you to decide), the grid items could in turn abuse `flex-grow, flex-shrink, flex-basis` to control their height/width within the main "masonry" axis

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

#257

Post by bazoom42 »

crispyambulance wrote: post #229
bazoom42 wrote: post #182

Earlier quoted context omitted.

> The MOST BASIC NOTION of layout, putting things in a freaking grid, was missing from CSS for almost two decades This is not true. CSS have had ‘display:table’ for 25 years, which is a simple grid layout model equivalent to html tables. Content can be aligned in rows and columns. ‘Display:grid’ is much more powerful of course.

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.

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

#258

Post by cnotv »

I evaluate the CSS updates based on the gap in masonry layout achievement. It's one of the most important layouts that have existed for more than a decade and should have been the only achievement after flexbox and grid. If you have a bunch of media, unless you have a narrow container like FB/IG, that's the only way to go. The alternative is fixed ratios. Anyone who has been working in FE knows it.

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

#259

Post by FalconSensei »

datascienced wrote: post #41
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.

Might be ok for a footpath?

Masonry layout is pretty common for streets, sidewalks, driveways, etc, at least in Brazil

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

#260

Post by krsdcbl »

reactordev wrote: post #239
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…

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…

It was "fun" when tinkering with some really creative special concern, it was an insufferable pain when your job was finding ways to layout all the "fun" designers envisioned who weren't highly familiar with CSS.

Before position and float madness and all, we used to abuse tables -- because layouts for complex information do work best in grid systems. Now CSS finally has a module that serves this purpose, and brings a huge amount of flexibility to make formerly painful stuff easy.

I'm not even talking about "page layouts" as a whole, just simple particle patterns like "a big icon with a title + description to it's right" is so so much cleaner and easier to do in markup AND css with grid.

Embrace the tools, and if you dislike them - you may as well just not use them. But thinks like grid make simple, stupid, deadlined webdesign _work_ so so much less of a grind.

(speaking as a General Graphic Designer who's also been deep, deep in CSS since before 2.1)

Post reply on HN