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

341–350 of 359 posts

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

#341

Post by crispyambulance »

bazoom42 wrote: post #327
crispyambulance wrote: post #296

Earlier quoted context omitted.

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

My memory is a bit foggy, but I recall there was an issue with older browsers back in those days not supporting display:table.

So if you wanted to "do right" you could not because IE6 was still "a thing" and did not support display:table. You were forced to use actual tables for layout or do endless tedious workarounds to make things work.

Who to blame? The W3C? Microsoft? I don't know but I glad those kinds of problems are mostly over.

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

#342

Post by afiori »

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…

Grid has a rich functionality for autoplacement of items and one of the arguments for masonry being part of grid is that you can easily mix the two positioning approaches

https://webkit.org/wp-content/uploads/video3-museum-dark.m4v

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

#343

Post by pornel »

fzeindl wrote: post #269

I never understood why CSS would not just adopt Apple's Autolayout and be done with it: I want to specify that this space should be equal to that space, these borders to grow, and those borders to shrink and this point always aligned to that point. It is simple, intuitive, it works for all cases. Instead we are inventing, what, the fifth generation of CSS-layouting now? Does nobody think this is odd?

> it works for all cases

It's only a fixed 2d arrangement. It isn't any more expressive than the CSS table layout or position absolute+relative combos. It has no ability to react to size constraints in any other way than naive stretching and hitting min-width hard. It can't do anything "responsive" like wrapping items to the next line, or switching a grid from 1x6 to 2x3.

You can't make masonry in autolayout constraints, other than precomputing specific constraints for every item, which won't automatically reflow the items to a new container width.

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

#344

Post by afiori »

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?

> And yes, while making CSS Grid more complex will make it harder to extend in the future, we believe there’s an advantage to having these two types of grid layouts intertwined. This way the CSS Working Group will always define all new additions for both modular and columnar grids. There won’t be something added to display: grid that will be left out of display: masonry, or vice versa. For example, many developers want CSS Grid Level 4 to provide a mechanism for styling grid areas and grid lines — perhaps a way to add a background color to a track, or create a rule line in a gap. It’d be great to ensure that will work for both modular and columnar grids from Day 1.

> By using subgrid, we can put the year and catalog number on the right of each card — and line up this data for one painting with the same data for the other paintings.

The downside is that all the parts of grid that might be useful in masonry would have to be duplicated in slightly different ways.

This together with the fact the the only two current implementations use display: grid

If it is possible to make them perfectly compatible then the main negative side

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

#345

Post by reactordev »

rhdunn wrote: post #328
reactordev wrote: post #303

Earlier quoted context omitted.

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 childre…

I meant without CSS Grid.

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

#346

Post by jampekka »

bazoom42 wrote: post #336
jampekka wrote: post #295

Earlier quoted context omitted.

There was a huge cargo cult adamantly against using tables back in the day, even though the "true way" of hacking divs with float and clearfixes and invisible images was totally broken. Somehow having bunch of wrapper and empty divs was "more semantic" or something. I was in the cult. It was totally inane, but seems to carry some effects to this day.

The movement was against using html table markup ( , etc.) for layout because of the accessibility issues. It was not against the CSS display:table since that does not affect accessibility.

IE didn't support display:table until version 8.

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

#347

Post by bazoom42 »

crispyambulance wrote: post #341
bazoom42 wrote: post #327

Earlier quoted context omitted.

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

My memory is a bit foggy, but I recall there was an issue with older browsers back in those days not supporting display:table. So if you wanted to "do right" you could not because IE6 was still "a thing" and did not support display:table. You were forced to use actual tables for layout or do endless tedious workarounds to make things work. Who to blame? The W3C? Microsoft? I don't know but I glad those kinds of probl…

Oh yeah, IE 6 did not support display:table. This was the age of hacks. Microsoft basically managed to block any progress on web standards for half a decade.

I’m not sure why you’d blame this on W3C though. IE stasis froze any standard including ECMAScript. It was Microsofts attempt to halt the progress of the web because they considered it a threat to their desktop dominance. Luckily it didn’t work.

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

#348

Post by datavirtue »

beardedetim wrote: post #306
krsdcbl wrote: post #256

Earlier quoted context omitted.

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.

That would be too simple and clean.

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

#349

Post by rhdunn »

reactordev wrote: post #345
rhdunn wrote: post #328

Earlier quoted context omitted.

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 childre…

I meant without CSS Grid.

Ah, ok. I wasn't able to get the last row working right with flex, but didn't experiment too much as the CSS grid approach worked. You could look through the other answers in that StackOverflow question.

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

#350

Post by reactordev »

rhdunn wrote: post #349
reactordev wrote: post #345

Earlier quoted context omitted.

I meant without CSS Grid.

Ah, ok. I wasn't able to get the last row working right with flex, but didn't experiment too much as the CSS grid approach worked. You could look through the other answers in that StackOverflow question.

I have. It’s a mix of people saying it’s can only be done with CSS grid semantics and then a few who prove them wrong with flex box. Reinforcing my above question about “why not :after? :last-child? And flex it into shape?”

But I get it. Grids are easy to grok and grid.css is for the birds. Bake it in. Bloat the spec. And allow pixel perfect precision with one (or two) less div.

Post reply on HN