That ain’t rhetorical: I’m actually curious about discovering nice use instances for CSS multi-column layouts.
The reply appears simple. Use columns whenever you need to break up any content material into columns, proper? Right here is usually the kind of instance you’ll discover in articles that present how CSS mutli-column layouts work, together with our very personal Almanac:
Proper on. However is that this an precise use case? Mmmmmaybe. If the textual content is comparatively transient, then maybe it’s a pleasant contact. That’s how I offered it to myself when redesigning my web site a few years in the past. It’s not that approach at this time, however that is what it appeared like then:
However a complete long-form article break up into columns? I find it irresistible in newspapers however am hesitant to scroll down a webpage to learn one column, solely to scroll again as much as do it once more.
I suppose we will use it to position two parts side-by-side, however flexbox is far more suited to that. Plus, a limitation prevents us from deciding on the columns to dimension them individually. The columns must be the identical width.
One factor columns have going for them is that they’re the one CSS format technique that fragments content material. (That’s, until we’re counting CSS Areas… what occurred to these, anyway?!) So, when you wanna break up a paragraph up into columns, it’s already potential with out further wrappers.
When else may you’ll want to break up a steady block of content material into columns? I bear in mind needing to do this once I had an enormous ol’ unordered record of things. I like the way in which lists could make content material straightforward to scan, however lengthy lists could make one aspect of the web page look tremendous heavy. Let’s say, for instance, that we had been itemizing out all of the publish tags for CSS-Methods in alphabetical teams. A multi-column format works superbly for that:
Go forward and take a look at resizing the viewport width. Three columns are outlined however the quantity will change primarily based on the quantity of accessible area. Gotta love all that responsive goodness with out the media question work!
I used to be engaged on a demo for the :left pseudo-class and reached for columns as a result of it’s a good way to fragment issues for printing demos. So, I suppose there’s one other use case. And whereas making a demo, I noticed {that a} multi-column format could possibly be used to create a masonry grid of things, like a picture gallery:
However what else? Are we restricted to brief paragraphs, lengthy lists, and free-flowing grids?
