0

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)

enter image description here

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.

enter image description here

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?

Panpaper
  • 451
  • 1
  • 6
  • 16
  • HTML and CSS only, no. You'll need javascript, there are libraries already existing for this, https://masonry.desandro.com/ is just one example. – Jon P Oct 21 '20 at 00:45

1 Answers1

0

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

Tasuri
  • 1
  • 3