Categories Only view remade into two columns

Continuing the discussion from How to style the `/categories` page?:

I have a question related to an older discussion.

How trivial is it to achieve this:

The closest I got is this:

By applying column-count: 2 to the DIV surrounding the table and display: block to the table elements.

But I am not sure how to force the header to span across the entire line :sweat_smile:

EDIT.
I have just realized that functionally, I would either have to duplicate this header row, leave only Categories or simply hide it all…

2 Likes

I think it might be easier if you make tbody display: block and column-count: 2? Then the thead will still span the full width.

But yeah at that point you’ll want to hide everything aside from “Category” anyway.

2 Likes

Alternative with flexbox:

.category-list tbody {
    display: flex;
    flex-wrap: wrap;
}
.category-list tbody tr {
    width: 50%;
    display: flex;
}
.category-list tbody .category {
    flex: 1;
}

Still a few tweaks to do though.

7 Likes

In the midst of it, I forgot that it would be nice if they keep horizontal alignment.
This is fantastic :slight_smile:

Notice that with this css the categories won’t be listed such as:

1 - 4
2 - 5
3 - 6

But as:

1 - 2
3 - 4
5 - 6

Also you need to add a media query to change the style on small screen.

2 Likes