Archived topic
How to divide content evenly over 3 columns?
5 replies · Started by anneloes_a on December 11, 2021
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!
Hi there,
can you share a link to the page where i can see the 'list' ?
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.
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;
}
}Hi David,
This worked great, thank you so much! Have a great week :)
You're welcome!
