0

I'm using Flexbox to display variable sized objects into multiple columns. I've noticed that they tend to get ordered in the following way:

+---+  +---+
| 1 |  | 3 |
+---+  |   |
+---+  |   |
| 2 |  +---+
|   |  
+---+

If I'm sorting things by relevancy or age, this causes users to need to go back to the top of the page to view the next column, which isn't desirable. Is there a CSS property I can set so that each object gets placed in the shortest column? For example:

+---+  +---+
| 1 |  | 2 |
+---+  |   |
+---+  |   |
| 3 |  +---+
|   |  
+---+
Jared
  • 4,240
  • 4
  • 22
  • 27
  • It could be useful https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-columns-rows – Juan Caicedo Jul 05 '18 at 20:48
  • You're basically looking for a masonry layout: it flows horizontally but fills up any vertical space above it. There is no CSS way to achieving this as of yet. The first layout you mention is done by flex box with column layout. The second one uses a non-regular grid and that's not possible with CSS only. – Terry Jul 05 '18 at 20:50
  • 1
    Excellent link @Michael_B; will vote to close. – Jared Jul 05 '18 at 20:53

0 Answers0