Streaming live at 10am (PST)

Collection Items and Flexbox Layout Help

Just wanted to see if anyone has ideas on how to make this layout work better. I’m trying to make this design, but having issues always getting the images to align at the bottom regardless of if the text is one or two lines long. Anyone hove suggestions?

Here’s the mockup:

Thanks in advance.

Here is my site Read-Only:

Here’s the page’s progress:

This is exactly what grid was built for.

That being said, I am still learning grid so I might not be much help but theres a lot of videos on that link

Thanks for the reply - unfortunately Grid doesn’t support Collection Items, which is what I need this layout to work with.

Oh I see. You may have to simply do multiple lists then nested inside wrapper divs. 1 list for the single big one limited to 1 and and then the 4 to the right limited to 4 to show 2-5 based on your order, you may need to add a number field to your cms. Then do the reverse for the second half.

Thanks for the input! That’s actually how I have it now - maybe I wasn’t as clear, I’m looking for help aligning these images regardless of if the text is one or two lines…making the layout more consistent. You can see how it looks right now:

Ohh I see. Sorry. Why not put the text inside a div with a min height that is 2 lines tall?

Ah, I didn’t think of that…but that’s pretty obvious :slight_smile: I’d prefer not to have this layout set by making divs have pixel heights, but it should work.
For some reason they aren’t lining up perfectly, but I think I can play around to figure that out.

Thanks for helping me make progress @DFink !

1 Like