That ain’t rhetorical: I’m really interested in finding great use cases for CSS multi-column layouts.
The answer seems straightforward. Use columns when you want to split any content into columns, right? Here is generally the sort of example you’ll find in articles that show how CSS mutli-column layouts work, including our very own Almanac:
Right on. But is this an actual use case? Mmmmmaybe. If the text is relatively brief, then perhaps it’s a nice touch. That’s how I sold it to myself when redesigning my website a few years ago. It’s not that way today, but this is what it looked like then:
But an entire long-form article split into columns? I love it in newspapers but am hesitant to scroll down a webpage to read one column, only to scroll back up to do it again.
I suppose we can use it to place two elements side-by-side, but flexbox is way more suited for that. Plus, a limitation prevents us from selecting the columns to size them individually. The columns have to be the same width.
One thing columns have going for them is that they are the only CSS layout method that fragments content. (That is, unless we’re counting CSS Regions… what happened to those, anyway?!) So, if you wanna split a paragraph up into columns, it’s already possible without additional wrappers.
When else might you need to split a continuous block of content into columns? I remember needing to do that when I had a big ol’ unordered list of items. I like the way lists can make content easy to scan, but long lists can make one side of the page look super heavy. Let’s say, for example, that we were listing out all the post tags for CSS-Tricks in alphabetical groups. A multi-column layout works beautifully for that:
Go ahead and try resizing the viewport width. Three columns are defined but the number will change based on the amount of available space. Gotta love all that responsive goodness without the media query work!
I was working on a demo for the :left pseudo-class and reached for columns because it’s a great way to fragment things for printing demos. So, I guess there’s another use case. And while making a demo, I realized that a multi-column layout could be used to create a masonry grid of items, like an image gallery:
But what else? Are we limited to short paragraphs, long lists, and free-flowing grids?
I have used css columns to show the timetable of a festival. Columns make it possible to align the items column by column where using flexbox or grid would align the items row by row which is not desirable. To keep blocks together and not break them I need to use display: table on them.
To avoid the children inside columns being split up I think you can use the break-inside:avoid property. I tried it for the first time ever just this week and seems to work well.
This is useful for print styles, where you may want extended text from an article to print efficiently on less paper.
Columns are also great where you may have an extended list of items. Combine with :has() and it’s quite powerful. For example, find out if a list has so many items. If it has that, then set up the list in columns. See https://codepen.io/jen4web/pen/RwMEYyB
I used them once for a long list of check boxes (a column chooser for a complex table of data). They needed to fit in a dialog.
Footnotes, especially when they are academic-style references, such as at the bottom of an Wikipedia article, work well with columns. No one is going to be reading them one by one so there is no readability issue, but you do want the footnotes block to be compact and not take too much page height.
Clever idea! Thanks for sharing.
Similar to the masonry grid example, I’ve used CSS columns to lay out a page full of testimonials. Perfectly responsive, and I was able to easily define the columns to break between blockquotes rather than within. Obviously if you have a bunch of testimonials of wildly different lengths, breaking within a blockquote might be more desirable.
Columns are great in Prince. Back when Opera still made Presto they also released a more print-like tech demo, in a similar sense as you’ll see in an EPUB viewer.
I used them once for a long list of check boxes (a column chooser for a complex table of data). They needed to fit in a dialog.
Wow.. developing on web for years, never even knew CSS had a
columnsfeature – and it works really well too. Also worth noting is thebreak-inside: avoid-columnto stop the browser wrapping content across columnsIn Safari css columns doesn’t align items properly at the top if you use margins and padding to space them. Only workaround I came up with is an empty :before or :after element with a height as a spacer.
I use CSS Columns to nicely dispatch blocks with variable height.
Number and content or blocks is not predefined. Columns allow a nicer layout than flex or grid.
I use
columnsto create masonry effect on a page with short notes about what I’ve learned in web development – https://romanvesely.com/log. Kind of like tweets, but more densely positioned. I also like how does it look even on a wide screen.That’s both a really nice page and a really great way to capture notes!