Split range into 4 equal parts

What is the best way to split up a range into 4 equal columns?

We have a list of 576+ topics on the new Digital.gov, and I would like to list them in four, vertical columns on the page, meaning it should be alphabetical going down the columns, not across (provided I sort them A-Z).

At the moment, I have a simple range that is looping through all the topics (line 40):

See this previous topic for some ideas: [SOLVED] Hugo Template Range Loop Every N Items

This is more or less an CSS question. If you cover all your topics in span tags with a class and all the surrounding CSS has no margins or paddings then adding just width: 25%; to each single tag would result in a 4 column layout.

.topic {
width:25%;
}

you would need to apply your margin and padding design inside of the .topic class then.