Honestly, it\u2019s difficult for me to come to terms with, but almost 20 years have passed since I wrote my first book, Transcending CSS<\/em>. In it, I explained how and why to use what was the then-emerging Multi-Column Layout<\/a> module<\/a>.<\/p>\n\n\n\n

Hint:<\/strong> I published an updated version, Transcending CSS Revisited<\/a><\/em>, which is free to read online.<\/p>\n\n\n\n

Perhaps because, before the web, I\u2019d worked in print, I was over-excited at the prospect of dividing content into columns without needing extra markup purely there for presentation. I\u2019ve used Multi-Column Layout regularly ever since. Yet, CSS Columns remains one of the most underused CSS layout tools. I wonder why that is?<\/p>\n\n\n\n\n\n\n

Holes in the specification<\/h3>\n\n\n

For a long time, there were, and still are, plenty of holes in Multi-Column Layout. As Rachel Andrew \u2014 now a specification editor \u2014 noted in her article<\/a> five years ago:<\/p>\n\n\n\n

\n

\u201cThe column boxes created when you use one of the column properties can\u2019t be targeted. You can\u2019t address them with JavaScript, nor can you style an individual box to give it a background colour or adjust the padding and margins. All of the column boxes will be the same size. The only thing you can do is add a rule between columns.\u201d<\/p>\n<\/blockquote>\n\n\n\n

She\u2019s right. And that\u2019s still<\/em> true. You can\u2019t style columns, for example, by alternating background colours using some sort of :nth-column()<\/code> pseudo-class selector. You can add a column-rule<\/code><\/a> between columns using border-style<\/code><\/a> values like dashed<\/code>, dotted<\/code>, and solid<\/code>, and who can forget those evergreen groove<\/code> and ridge<\/code> styles? But you can\u2019t apply border-image<\/code><\/a> values to a column-rule<\/code>, which seems odd as they were introduced at roughly the same time. The Multi-Column Layout is imperfect, and there\u2019s plenty I wish it could do in the future, but that doesn\u2019t explain why most people ignore what it can do today.<\/p>\n\n\n

Patchy browser implementation for a long time<\/h3>\n\n\n

Legacy browsers simply ignored the column properties they couldn\u2019t process. But, when Multi-Column Layout was first launched, most designers and developers had yet to accept that websites needn\u2019t look the same in every browser.<\/p>\n\n\n\n

Early on, support for Multi-Column Layout was patchy. However, browsers caught up over time, and although there are still discrepancies \u2014 especially in controlling content breaks \u2014 Multi-Column Layout has now been implemented widely. Yet, for some reason, many designers and developers I speak to feel that CSS Columns remain broken. Yes, there\u2019s plenty that browser makers should do to improve their implementations, but that shouldn\u2019t prevent people from using the solid parts today.<\/p>\n\n\n

Readability and usability with scrolling<\/h3>\n\n\n

Maybe the main reason designers and developers haven\u2019t embraced Multi-Column Layout as they have CSS Grid and Flexbox isn\u2019t in the specification or its implementation but in its usability. Rachel pointed this out in her article<\/a>:<\/p>\n\n\n\n

\n

\u201cOne reason we don\u2019t see multicol used much on the web is that it would be very easy to end up with a reading experience which made the reader scroll in the block dimension. That would mean scrolling up and down vertically for those of us using English or another vertical writing mode. This is not a good reading experience!\u201d<\/p>\n<\/blockquote>\n\n\n\n

That\u2019s true. No one would enjoy repeatedly scrolling up and down to read a long passage of content set in columns. She went on<\/a>:<\/p>\n\n\n\n

\n

\u201cNeither of these things is ideal, and using multicol on the web is something we need to think about very carefully in terms of the amount of content we might be aiming to flow into our columns.\u201d<\/p>\n<\/blockquote>\n\n\n\n

But, let\u2019s face it, thinking very carefully is what designers and developers should always be doing.<\/p>\n\n\n\n

Sure, if you\u2019re dumb enough to dump a large amount of content into columns without thinking about its design, you\u2019ll end up serving readers a poor experience. But why would you do that when headlines, images, and quotes can span columns and reset the column flow, instantly improving readability? Add to that container queries and newer unit values for text sizing, and there really isn\u2019t a reason to avoid using Multi-Column Layout any longer.<\/p>\n\n\n

A brief refresher on properties and values<\/h3>\n\n\n

Let\u2019s run through a refresher. There are two ways to flow content into multiple columns; first, by defining the number of columns you need using the column-count<\/code><\/a> property:<\/p>\n\n\n\n