I recently encountered an issue where I am attempting to create a three-column layout with each column filled with a dynamic number of divs (boxes) ranging from 5 to 15, each with its own height based on its content.
These divs are expected to:
1) Be displayed in columns.
2) Wrap to the next column when they reach the viewport height.
3) When the layout reaches a state where it needs to wrap again into three columns, all columns/divs should shrink to fit and prevent breaking the layout.
The picture below illustrates the OUTCOME
(For example, if #4 was slightly shorter, it wouldn't wrap to the third column but would stay under #3 instead.)
I attempted to solve this by using Angular Material's 'layout-wrap' and 'layout='column', but it doesn't shrink the divs horizontally when necessary. After a few wraps, further divs end up jumping out of the container.
Flexbox seems to be ineffective in this scenario.
Perhaps I could achieve this in the Link function via Angular?
Any advice or suggestions would be greatly appreciated!