You should be using CSS columns

Visual website building tools have created a much more common problem than I realized.

A list split up into multiple columns should be using CSS columns, and I’m not sure why it’s something that seems completely left out of visual building tools. I don’t see it used as much as it should across most sites, and I don’t understand isn’t used more.

Lists are great. They break up walls of text, they help outline things like features, and for our purposes, we have two types of lists: short and long.

Short Lists

Most of the time short lists should be within the flow of the content. You don’t want do just split out 4 list items into 3 columns. But if it’s something that you feel like should be split into columns to better call them out, that’s when alternative layouts can be brought in.

An example of an alternative is using things like styled boxes as a type of callout box. Things like lists of services or categories are often laid out like this using things like images, icons, and blurbs to make it easier to read through the list.

Long Lists

There’s no exact number of list items to qualify it as a “long list.” If your list starts to get long enough to have eyes glaze over while reading it, or you have to go back and reread the paragraph before it, or you just end up skipping over list items because it’s so hard to take in, it’s long.

The first question to ask is, can this list be sorted and broken up into smaller lists?

You don’t want to break up lists just because it’s long, but usually long lists can be re-categorized and broken up to improve readability and understanding. Give an intro for each list with headings and paragraph text where it makes sense. This is an opportunity to improve understanding of your content.

You can then put these smaller lists into columns if that still makes sense for the new page layout. You can also take these lists and follow the same method of using boxes as the short lists, but too many boxes could end up making a long list feel even longer and harder to follow, so keep that in mind.

Lists in Columns (The Usual Way)

Most of the time when you need to take a long list and put it in multiple columns, unless you know CSS and your platform allows you to add it, you’ll grab a container, add some columns, and add a list in each column.

It’s technically separate lists, but the hope is that people will look at that area visually and assume it’s one group of related items.

But it still ends up as one big long list on smaller screens, and sometimes you have to take extra steps to make sure the spacing adjusts with the screen sizes so they still look like one list.

And pretty much 100% of the time, these lists are added as separate blocks or widgets, which makes them separate lists in the code, which translates to separate lists for things like screen readers. This makes the page harder to understand and more annoying to navigate through.

Lists in Columns (The Right Way)

When you have a single list that you want to display in multiple columns, use CSS columns to customize the layout of the list. It’s a much more straightforward way to put text into columns without the complexity that flexbox and grid can bring while still providing the options to customize the way the columns look.

But visual builders don’t make that easy to do.

We shouldn’t have to be forced to put a list into multiple separate containers and select the correct HTML for every element, if that’s even an option.

The container method is a more common way to set up the callout box method, since a lot of builders tend to prioritize container use. As long as you can select the correct HTML, this is a fine way to accomplish this. Depending on the layout, these callout boxes will end up using flexbox and grid over the column count method.

Visual builders don’t make every option available for every element, so there aren’t enough options available to you to make the list look how you want it to without writing custom CSS.

Most builders do at least let you add a class to some portion, either on the container or the list element itself. You’ll then use that class to write some CSS. You might even be able to use a class that comes with your builder to look like something that already exists.

The Code

To add CSS to your site, you’ll want to look for the sitewide option. The site editor’s Additional CSS area or your builder’s CSS area are for sitewide methods, there are plugins that let you add CSS as well. You can also add CSS directly to individual blocks to apply to only that singular item, and visual builders often have this option available as well.

The most straightforward method is to use column-width.

.list-in-columns { 
    column-width: 300px; 
}

That’s it. It will adjust the number of columns based on the available space, and you can put this either in a class or directly into the CSS of that particular element.

If you want a little more control over the number of columns, that’s when you’ll use column-count.

You’ll add a media query at the screen size you need it, either based on what is needed when you adjust the window size or using existing breakpoints on your site.

.list-in-columns {
    column-count: 3;
}

@media screen and (max-width: 500px){
    .list-in-columns {
        column-count: 2;
    }
}

@media screen and (max-width: 300px){
    .list-in-columns {
        column-count: 1;
    }
}

CSS columns have a ton of other styling options as well. For example, if you need to, you can add column-gap. This can help keep columns from squishing too close together, but take a look at your site and see if you need it or not.

If you’re adding additional styles like column-gap, column-width, or anything else needed for all lists that are in columns no matter what, add those to a general class and add everything except column count.

Then create classes for your different column counts and set those up with their base column count and adjusting those counts for the different screen sizes.

Now you can use those classes whenever you need to break your list up into two, three or four columns.

You can use all of these things together, or you can stick with just column width, but CSS columns provide the flexibility to work with all kinds of skill levels and code methods, and it should absolutely be the go-to method for putting lists in columns.

This is something that I’d love to see visual builders start to implement for lists. Allow someone to set a column width or at least choose the column count and gap for a list element.

Some Final Notes on Lists

If you’re creating a design to hand off to someone, include notes next to things that should be marked up as lists.

And the same rules for lists in general still apply to lists in multiple columns. Don’t use fake lists with dashes and line breaks, use the right list type, and don’t over-next lists. (Keep it one or two levels deep.)

So next time you want to split up your list into columns, you’re now ready to make good choices for your content and for the people coming to your site!