[SOLVED] Align items inside grid + contain within cell

Hi, I am working with a Collection List inside of a Grid Layout.
I am trying to get the Discount Code text and descriptions to line up, and the button to align on the bottom.
I have been trying Div Blocks, Justify: Stretch, and Auto Margins, but nothing seems to work.

Additionally, When I extend the screen past a certain point, the descriptions and buttons go past the max width 100%… how can I keep this contained within the cell?
Grateful for your help!

Read-Only: Webflow - NEW Abby Blue

I see that the Collection Item is what expands when my screen size expands, even though max width is set to 100%. I can’t for the life of me figure out how to stop it from expanding past 100%.

  • Also still haven’t been able to align the different content pieces properly

To achieve this, set the Collection Item’s Display to Flex, and Direction to Vertical. Do the same for Div Block 3. Then on Div Block 3 set Sizing to Grow if Possible.

It looks like you’re not wanting the text to expand past the width of the image. In this case you’ll need to set the max width on Collection Item to whatever the width of the images are, which looks like 430px. Setting max width to 100% means that it will grow to fill all the available space, and since larger screen sizes means that the width can be wider than the image, the text is going to grow past the image width.

Lastly if you want the collection items to be centered on larger screen sizes you’ll need to add a margin of Auto to the left and right.

1 Like

Thank you so much for your reply! Per your suggestion, I was able to get the width problem solved. I’m still a bit stuck on the alignment options. I’d like to keep the display as a Grid Layout, and not Flex Layout. Is this possible?

One other thing, I see there is extra space on the right side of the Collection List (see screenshot below) - it does not go to the edge of the hero image and gets larger when the screen increases. It’s not stretching to the edge of the section. Any ideas?

Here’s the Read-Only link again: Webflow - NEW Abby Blue

I believe I set up most of your suggestions correctly, but I’m not sure what you mean by setting Sizing to Grow. I wasn’t able to get them aligned with the Flex and Vertical settings

The display in my proposed solution is still a grid. You’d just need to make Collection Item and Div Block 3 into a flex layout, so no changes are needed to the current grid you have set up on the Collection List.

If you want the items to just fill the columns they’re in then remove the max width of 430px, and set the width on the Image to 100%.

1 Like

image

1 Like

Width issue is solved, thank you!

The last problem I’m still facing is the content alignment:
I set Div Block 3 and Collection Item to Flex and Vertical, but still having issues aligning the content inside. Did I miss something?

Looks like all that is missing is having Sizing set to Grow if Possible on Div Block 3. I sent a screenshot above to help you find the setting.

1 Like

Ah-ha! Amazing. Thank you so much for your help, Caitlin! You saved the day.

1 Like