This is readily achievable today with `columns`: https://primozic.org/aesthetics-art
Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout
121–130 of 359 posts
Re: Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout
#122Earlier quoted context omitted.
CSS may be complex, but you get a huge bang for the buck in terms of UX, rendering performance, flexibility, accessibility, compared to most drawing and layout systems. You could argue against border-radius and flex as well, but Im glad we’re past clearfix and gifs for corners. Does masonry layout qualify for becoming standard? I don’t know.
> compared to most drawing and layout systems This is just an accident of history and not because CSS has anything that makes it intrinsically better than the alternatives.
Anything other than existing.
CSS is quite a mess, and I would welcome a backwards-incompatible new layouting system, but all the alternatives out there are a lot worse.
Re: Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout
#123If one wants to do a "Masonry" layout, what's wrong with calculating it via JavaScript?
Because why introduce a custom abstraction to implement something with an imperative scripting language when you can achieve the same result with a declarative language built specifically to address this use case? You'd rather maintain all the maths and JS dependencies for this than have browsers just render what you want?
The question is, where do you draw the line?
It's obviously not viable to implement literally every single design imaginable straight in CSS. If I want to do something silly like placing my content on the faces of a hypercube it wouldn't be realistic for me to expect that to be part of CSS. Having me write some JS is completely acceptable - that's what it is for, after all!
It's not a matter of "would this be better in CSS", the answer to that is painfully obvious. The relevant question here becomes "is this common enough that it warrants a CSS implementation". And honestly? In the case of Masonry I am not convinced it is.
Re: Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout
#124Related: I created an interactive demo of grid principles here:
Re: Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout
#125Earlier quoted context omitted.
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.
Not fit for any domain? It's one of the most widely used "programming languages" in the world. It's clearly fit for many domains I don't know why people have to be so dramatic with their tech opinions
I don't get the drama either. The issue I have with CSS is less about the spec itself, and more about browser compatibility. I'd be dead with caniuse.com and MDN. Having said that, when I build a new page, I rarely need to spend more time laying out the html & css than it takes to type it out and test. Creating cross platform, responsive web pages is a solved problem now.
Re: Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout
#126Is there any examples of server-side rendering that pre-determines a masonary layout for the content? Like: Given these images, and this window size, here's a calculated layout to make them all look nice... I figure this would be more performant than any type of JS polyfill
How would this work when loading the page the first time? Would you check the window size and reload once just to get the first layout? And would you reload the page every time the window is resized?
Re: Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout
#127> 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.
It makes sense they'd pick this name, it refers to the jQuery plugin that was popular for doing this kind of layout back in the 2010s, so it's a convenient shorthand.
[flagged]
Re: Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout
#128If the designers of Unix had seen the light of CSS, they wouldn’t have bothered with shells and file descriptors and C and Awk and all that composable flotsam. They’d just created a single program, call it the “Central Software System”, and defined thousands of properties that let you control its state machine to produce the output you need. Presto! The perfect computer. If for some reason someone needs a new kind of…
[deleted]
Re: Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout
#129If the designers of Unix had seen the light of CSS, they wouldn’t have bothered with shells and file descriptors and C and Awk and all that composable flotsam. They’d just created a single program, call it the “Central Software System”, and defined thousands of properties that let you control its state machine to produce the output you need. Presto! The perfect computer. If for some reason someone needs a new kind of…
[deleted]
Re: Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout
#130Related: I created an interactive demo of grid principles here: https://cssprinciples.com/3/grid/
this is very educational and useful