351–359 of 359 posts
Masonry layout doesn't form a grid, but multiple columns with a variable item height.
I feel like this should not be a part of CSS spec, and absolutely not a part of CSS Grid.
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…
.masonry {
column-count: 6;
column-gap: 10px;
}I strongly dislike the megamenu demo https://webkit.org/demos/grid3/megamenu/ >, and feel masonry is completely inappropriate there. It makes a complete mess of flow direction, badly breaking expectations. The reading order you’d expect : https://temp.chrismorgan.info/2024-04-23-masonry-megamenu-2.... . What the demo actually gives you: https://temp.chrismorgan.info/2024-04-23-masonry-megamenu-1.... . This affects co…
Earlier quoted context omitted.
For awhile it was just described as "Pinterest style." It has some use cases but for the most part it's literally a wall of unstructed information. Difficult to parse and build any mental hierarchy. It's also ... incredibly easy to do with existing css.
> incredibly easy to do with existing css care to demonstrate? given a dynamic collection of images where you don't know the aspect ratios beforehand
def. grid: a network of lines that cross each other to form a series of squares or rectangles. Masonry layout doesn't form a grid, but multiple columns with a variable item height. I feel like this should not be a part of CSS spec, and absolutely not a part of CSS Grid.
Earlier quoted context omitted.
So you're saying the a11y tree and tab ordering is bypassing the actual ordering of content and instead traversing the columns one by one? I'd call that a bug. In a masonry layout the expectation of a sighted user is that there is no continuity from column to column, but instead through the visual line. And the "unexpected" (disagree) ordering you show does that. I think the issue would be that tab ordering is ignori…
The problem here is that users will look at the end result and see a series of columns, but that the use of masonry makes it not that at all. I’m saying that masonry is risky if you’re using it purely visually, specifically because it’s purely visual. It’s the same deal with the CSS `order` property: it can be useful, but you have to be careful not to break expectations. CSS is almost purely visual. There are a few c…
I really like the general look and feel of masonry/waterfall layout, maybe it's because I grew up reading physical newspapers (and still do), but to me a columnar layout is just an intuitive way to divide up a page. I just wish there was an alternative to the default masonry ordering, which afaik is a simple rule that goes sth like 'place the next item in whichever column it can go up highest'. This means that the le…
It's the left-to-right ordering that's the problem. I'm fairly sure there's no way to order things left-to-right in this layout without inevitably having to skip around haphazardly. In a magazine-style layout, wouldn't you read the columns top-to-bottom first, then left-to-right? You can accomplish that already in CSS with either 'columns' or vertical flexbox. Another issue with this 'masonry' layout is the ragged ed…
Earlier quoted context omitted.
No, but basing capabilities solely on what they imagine "well-known websites" might want is .
And how would you do it sans imagination?
That's a recipe for stagnation.
I found a really cool way to do this with svelte and css grid a few months ago, based on a blog post I can't seem to find now. A full masonry layout too, not just columns, but each element can have dynamic height and width. The thing that made it click for me was that you don't have to make the grid rows and grid columns 1:1 with the full width/height of each element. Making 10px or 20px rows and columns and then usi…