Display Drupal views columns vertically

Let’s say you have a views of volleyball teams like so:

Each row is an age bracket and each column is a team. But you want to see this vertically so the first column would have 10-1 and 10-2 beneath it, and the second column would be 11-1, 11-2, etc.

How do you achieve this in Views?

First, use a Grid format. That’s fairly obvious. You don’t have to use Responsive Grid Views, but you can.

In this example, we are breaking each row (soon to be come a column, hopefully!) by age. So our grouping will be the age field on the Team content type. Since we don’t care to see the group field, we hide it using Asset Injector (or CSS Injector). Tag the view with class teams. Then do:

.teams h3 {
    display : none;

This gives us the output above. Almost perfect.

Looking at the view’s HTML we each row is the views-view-grid div and the parent is view-content. Note that it’s the views-view-grid div we want to be columns under the view-content div.

Add flex display to view-content:

.view-content {
    display : flex;

This gives you some really smashed content:

But we’re close!

Expand the HTML in Developer Tools until you see the views-col col-1 div. Uncheck float: left; et Voila

Just add that rule and you’ve got the layout.

.views-view-grid .views-col {
    float : none;

Tweaking the sizing and you’re done.

Something like flex-basis on .views-view-grid.horizontal around 12% will get you in the ballpark.