> there are big questions still being asked about how CSS should handle masonry-style layouts. Some people remain skeptical that this capability should be part of CSS Grid, and want it to instead be its own separate display type. Others are questioning whether or not this kind of layout is needed on the web at all — they aren’t sure that well-known websites will use it.
#Webdev, what's your favorite method of doing a Masonry-style layout? i.e. Multi-column posts in row-sequence like Pinterest or some Tumblr/Wordpress themes.
There are quite a few communities that are entirely image posts so presenting them as a vertical list of thumbnails doesn’t really make the best of what is there.
To improve on that I’ve made use of the common web design pattern called ‘masonry’, where the images are arraigned like bricks in a wall. Check it out:
On each tile there is the title of the post at the bottom which can be clicked on to view the post and it’s comments. This footer area could be improved with voting buttons and perhaps the number of comments, in future.
This doesn’t work as well for meme communities as memes often contain a lot of text, which gets squished. Perhaps there needs to be a 2 or 3 column version with larger thumbnails.
This guy correctly predicted that there would be a war in Israel in 2023, last year. If you think Gematria is bullshit, watch this video and think again.
If there's native CSS masonry support in browsers, it would look like this. Only Safari Technology Preview supports it now https://caniuse.com/?search=masonry
Phanpy site, showing grid of media posts from #PixelArt hashtag timeline from mastodon.social. This time it's rendered with masonry layout, which also can auto-adjust the number of columns as the viewport width is resized.
For years I enjoyed reading David Hartwell's anthologies. Even though he thought keystone meant cornerstone when writing the intro to "The Dark Descent" (1987).
A grid view was my first goal for https://schizo.social. #Mastodon clients all have so much dead-space, and I have wide screens so I want the content to fill them. I use social media for novelty, and without an algorithm it takes a LOT of scrolling to find anything interesting in the federated feed.
But the content of statuses varies a lot, so using a #CSS#Grid to achieve it leaves wide gaps in the rows. The only solution for that is to truncate the content with max-heights (there's a #masonry mode for #CSSGrid but it's only supported by #firefox and then only with an about:config flag).
So I went with #columns instead which are widely supported and achieve the masonry effect. The problem with those is that content is laid out chronologically down the #column, not across the rows.
It is only implemented in Firefox (behind a flag) and #Safari 17 (Technical Preview) at the moment, though (one more reason to ditch Chr**e and Ed*e if you ask me).
A.k.a "what you do to get more detail, when using more geometry is too expansive".
Works the same in #masonry as it does in #gamedev ;)
If you don't see it: look at how the blue windows with plaster flowers inside the dome are... not actually made from plaster, but painted with a fake perspective and lighting to make it look real from a certain point of view.
A close-up reveals the trickery.
Location: some town on Provance, France, IDK the name.
Another week on #Dartmoor and another #dam and #spillway. This one is from #Venford#reservoir and is quite an unusual dam constructed of #masonry. It was opened in the first decade of the twentieth century. A couple of decades ago, work was done to ensure the spillway could handle flood events of increasing magnitude as a result of #GlobalWarming. As you can see there was some flow today over it.