How to create columned view in HTML where objects are arranged horizontally not vertically?

Question

I created a columned view using the CSS column-count property. When set to column-count: 3, my page content is displayed as 3 separate columns with no extra vertical space - elements are vertically-continuous, there is no extra vertical space or a horizontal rule that elements on the same line adhere to. (See image)

Visually, this is exactly what I wanted. However, as you can see, the elements are treated as a continuous paragraph, so elements are arranged vertically.

1 | 4 | 7
2 | 5 | 8
3 | 6 | 9

I'd like this to be arranged horizontally, but preserving the same look.

1 | 2 | 3
4 | 5 | 6
7 | 8 | 9

One way I tried was to not use column-count and instead give each element a fixed width, but all elements would adhere to a horizontal rule, leaving a huge vertical gap below the elements if one of the elements on that line is longer than the rest.

Another way I thought of was to have 3 separate queries and each column would contain results from 1 of the 3 queries. However, the three columns become one on mobile devices, and so I'd get weird numbering on mobile devices.

Is there a way to do this using HTML and CSS only?

Answer 1

You should definetly check out FlexBox, which is included in default css. The problem should be fixed with you putting all elements into a div, giving it:

display: flex;
flex-direction: row;
flex-wrap: wrap;

and simply adjusting the size etc. to your desire.

Greetings