Streaming live at 10am (PST)

How to make 2 column display with items of varying height?

Hello all -

I am trying to display a series of items in a portfolio style list. There are two columns, and the items are of varying height. My hope is to show them in two columns, but have the items equally spaced vertically.

Right now, I have it displaying in two columns but they aren’t really columns - it’s just wrapping after a certain width which forces it to always show two items per line. But regardless of the height of any 1 item, it shows two items before moving to the next row. So, the are big open spaces to keep the rows together. I looked for an example of what I want but haven’t found it yet, I hope it’s clear.

I think I could probably just have 2 columns, then it would make even spacing throughout. However, I really want the sort order to make sense, and if I put it into 2 columns then order won’t make sense.

I just read this back and Im not sure I explained it well - but here is the site with a small dataset in it: https://bit.ly/32hEwGr

If anyone understood what I’m trying to go for and has any suggestions i’d appreciate it! thanks!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Just a follow up : this isn’t a perfect example, but this template is a bit like what I’m looking for: https://keetrax.com/work/

If you change the screen width, you can see that the tiles stay close together even if they are different heights.

I’m not 100% sure what you’re aiming for, but try using the Grid functionality within the columns.

Grid layouts tend to be pretty responsive right away and may guide you towards the solution you’re looking for.

Hope that helps.