What you’re asking seems tricky and may require some JS magic.
With the CSS column property, I’m confident that the categories won’t be horizontally aligned (unless you set a fixed height) as they are with flexbox and it’s not very pretty.
I achieved what you want but it’s a bit hacky:
I used my previous CSS, then added an empty <tr> (which I believe can be done with a single JS line) and set the order property to change the order of the divs. The latter can be done via CSS only by targetting each data-category-id HTML value. Here’s the result:
Here’s the empty <tr>:
Note that would probably have to change CSS and/or JS each time you’ll add or remove a category.
edit : if you need only one or two additional empty elements, you don’t need to use JS to add a <tr>, you can also use a :after and/or :before like this:
.category-list tbody:after {
width: 1px;
content: "";
}
It adds a 1px empty element which works the same.
