A list split up into multiple columns should be using CSS columns, and I’m not sure why it isn’t used more. Most builders don’t even give the option to display a list block in columns.
And not all lists need to be split up into columns in the first place.
So how do you figure out what to do?
Short Lists
Most of the time short lists should be within the flow of the content. 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. But you don’t want do just split out 4 list items into 3 columns.
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.
Because these lists are short, if you break out these things into columns using styled boxes, it’s usually fine to forgo the list markup and prioritize presentation. Keep in mind that not all callout boxes should be an HTML list, especially when there are only one or two items.
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, 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 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.
You can then put these smaller lists into columns easily 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 even longer and harder to follow.
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 and assume it’s one group of related items.
Visually, this can help break up long lists, even though it’s still ends up as one big long list on smaller screens. Sometimes you have to take extra steps to make sure the spacing adjusts with the screen sizes so they still look like one list.
But almost 100% of the time, these lists are added as separate 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 flex 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.
Does this sound like your builder? Reach out to them. If they marked up modules correctly, allowed you to choose your HTML elements, or made more options available to you, like column count, it would be a whole lot easier for people to choose the correct method for displaying lists.
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 flex and grid over the column count method.
Visual builders don’t always 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.
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.
Additional 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.)
