Posted on

When Do You Use CSS Columns?

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?

When Do You Use CSS Columns? originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Posted on

You want minmax(10px, 1fr) not 1fr

There are a lot of grids on the web like this:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

My message is that what they really should be is:

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(10px, 1fr));
}

Why? In the former, the minimum width of the grid column is min-content, which can be awkwardly wider than you want it to be (see: grid blowouts). In the latter, you’ve reduced the minimum to 10px (not zero, so it doesn’t disappear on you and lead to more confusion).

While it’s slightly unfortunate this is necessary, doing it leads to more predictable behavior and prevents headaches.

That’s it. That’s my whole message.

(Blog post format kiped from Kilian’s “You want overflow: auto, not overflow: scroll” which is also true.)

The post You want minmax(10px, 1fr) not 1fr appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Posted on

The Trickery it Takes to Create eBook-Like Text Columns

There’s some interesting CSS trickery in Jason Pamental’s latest Web Fonts & Typography News. Jason wanted to bring swipeable columns to his digital book experience on mobile. Which brings up an interesting question right away… how do you set full-width columns that add columns horizontally, as-needed ? Well that’s a good trick right there, and it’s a one-liner:

columns: 100vw auto;

But it gets more complicated and disappointing from there.

With just a smidge more formatting to the columns:

main {
  columns: 100vw auto;
  column-gap: 2rem;
  overflow-x: auto;
  height: calc(100vh - 2rem);
  font: 120%/1.4 Georgia;
}

We get this:

Which is so close to being perfect!

We probably wouldn’t apply this effect on desktop, but hey, that’s what media queries are for. On mobile we get…

That herky-jerky scrolling makes this a bad experience right there. We can smooth that out with -webkit-overflow-scrolling: touch;…

The smoothness is maybe better, but the fact that the columns don’t snap into place makes it almost just as bad of a reading experience. That’s what scroll-snap is for, but alas:

Unfortunately it turns out you need a block-level element to which you can snap, and the artificially-created columns don’t count as such.

Oh noooooo. So close! But so far!

If we actually want scroll snapping, the content will need to be in block-level elements (like <div>). It’s easy enough to set up a horizontal row of <div> elements with flexbox like…

main {
  display: flex;
}
main > div {
  flex: 0 0 100vw;
}

But… how many divs do we need? Who knows! This is arbitrary content that might change. And even if we did know, how would we flow content naturally between the divs? That’s not a thing. That’s why it sucks that CSS regions never happened. So to make this nice swiping experience possible in CSS, we either need to:

  • Allow scroll snapping to work on columns
  • Have some kind of CSS regions that is capable of auto-generating repeating block level elements as-needed by content

Neither of which is possible right now.

Jason didn’t stop there! He used JavaScript to figure out something that stops well short of some heavy scrolljacking thing. First, he figures out how many “pages” wide the CSS columns technique produces. Then, he adds spacer-divs to the scrolling element, each one the width of the page, and those are the things the scrolling element can scroll-snap to. Very clever.

At the moment, you can experience it at the book site by flipping on an optional setting.

The post The Trickery it Takes to Create eBook-Like Text Columns appeared first on CSS-Tricks.