[Resolved] How to divide content evenly over 3 columns?

[Anneloes]

Hi!

I just bought GeneratePress and love the theme so far.

I have a long list in a (draft) blog article that I want to split up in 3 columns, but I can’t get the list to divide the content evenly over the 3 columns. I prefer not doing it manually as I’ll have to update the list regularly. Is there a way to spread content equally over 3 columns?

Kind regards!

[David]

Hi there,

can you share a link to the page where i can see the ‘list’ ?

[Anneloes]

Hi David,

Not yet, my blog isn’t finished yet. But it’s just a simple blog post with a regular unordered list with around 45 items.

So like:

• Item
• Item
• Item
• Item
• Item
• Etc

I want to distribute that evenly over 3 columns because otherwise it takes up a lot of space in my blog post, but I don’t want to do it ‘manually’ (e.g. dividing the 45 items by 3) because it’s harder to maintain.

[David]

Select the List Block, in Advanced > Additional CSS Class(es) add: list-column-3.

Then add this CSS to your site:

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

/* Change number of columns on smaller devices */
@media(max-width: 768px) {
    .list-column-3 {
        column-count: 1;
    }
}

[Anneloes]

Hi David,

This worked great, thank you so much! Have a great week 🙂

[David]

You’re welcome!

[Author]

Posts