Are We Approaching CSS Masonry Wrong?

I was reading Saleh Mubashar’s article on CSS-Tricks “Masonry: Watching a CSS Feature Evolve” and it made me so angry I had to roll out of my grave, and back into my Medium account that I haven’t published on in 11 months.

So, what caused this sudden bout of reanimation?

The gigabrains over at CSSWG are taking CSS masonry syntax back to the lab to figure it out some more. Apparently, syntax like grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) doesn’t roll off the tongue very well. That was Chronium’s suggestion. Webkit wanted something more je ne sais quoi and went with using CSS grid syntax, but with the new property item-flow: row collapse , which is the most ambiguous property naming since display: block flow-root.

While block flow-root is neat, but isn't there any better term we could have used?

So, What to Do?

While Webkit and Chromium figure out the next syntax word salad to serve us, I’d like to propose an alternative. It’s one thing to complain, but it’s another to provide an idea.

So, I would like to reintroduce you to CSS flexbox’s old chum, column-count.

column-count (circa 2017), has the neat ability to take content and break it into even columns. For example, like reading a newspaper (y’know, old media) or a restaurant menu.

It has some great features like columns-width , or column-span . However, it does have some fallbacks.

1. The Need for Multiple Column Widths

This is not really an issue if you look at the examples people use when discussing CSS masonry. “It looks like Pinterest!”, which has equal columns. But masonry isn’t like that. Sometimes columns (cells? bricks?) are bigger, or sometimes they stack together in the same sub-column. A great example is (and am I really saying this?) Windows 10.

Gross, but a good example.

Versus Pinterest, which is pretty much just columns:

The JavaScript Masonry goes with a more Windows 10-like approach, and I feel that’s more like what we are looking for when it comes to masonry, not what Pinterest does. Don’t get me wrong. Love me some Pinterest boards, but that’s not masonry.

This! This is masonary!

I feel this addition to CSS column-width would be a good idea, and could easily fall back gracefully.

div {
  column-width: 33%; /*old*/
  column-width: 33% 100px 20% 1fr; /*new*/
  column-width: repeat(4, 1fr); /*new, not graceful*/
}

2. Column Direction

This is another issue with CSS columns, which is probably why you stopped using it. Child elements don’t go left to right; they go top to bottom, and then wrap back to the top. This means if you append more content to a CSS column, it’ll go into the last column, and make all the others longer.

This isn’t what we want. We want new content to go to the bottom of the existing content.

We could add a new property column-flow: horizontal which makes elements flow horizontally. So it does the following:

Old way:
-------
|1|4|7|
|2|5|8|
|3|6|9|
-------

Problem!
-------
|1|5|9|
|2|6|10|
|3|7|11|
|4|8|12|
-------

New way?
-------
|1|2|3|
|4|5|6|
|7|8|9|
-------

Solution?
-------
|1|2|3|
|4|5|6|
|7|8|9|
|10|11|12|
-------

A bunch of images or a list makes sense, but how would a paragraph work? I would say just take up a single long cell. But what if we want that to take up multiple columns? I got chu, fam.

3. Better Column Span

CSS columns already have column-span, but it’s pretty limited. It has “none” or “all”. Wow. That’s the best the gigabrains could come up with? All or nothing?

What if we added something in, like, … 2? Or 50%? Or 1fr? Something that’s more specific. The benefits here are that we can make something span multiple columns, but not all columns.

This is kind of like CSS Grid’s grid-area: 1 / 1 / 2 / 4; but doesn’t require a degree in AutoCad to figure out.

Here is a concept piece of what I was imagining:

I did this with an HTML table. Revolutionary, I know.

column-fill already kind of does that, but not really. I also didn’t even know it existed before writing this. I think it’s fair to retire it and find a more elegant solution.

But I would love to know your thoughts on CSS masonry, their proposals, my proposal, and the state of current CSS in general, since I think it’s a mess!

If you enjoyed this, check out my other stuff so Medium stops emailing me and telling me my Partner Program didn’t get over the threshold to pay me out. Last time it paid me was June, for $7.25! 💀