Grid Responsiveness

Design help General
1

Hello,

Wondering if what I want to do is even possible?

I’ve created a grid on my ‘Albums’ page that is a CMS collection. I have made the grid responsive however I wanted the mobile view to have 2 columns of square 1:1 centered tiles - this I have accomplished. That said, when I go to add a new album to the CMS collection, it does not auto-generate the rows to the exact size I made it (120px x 120px) in the grid in the mobile view. It defaults to 200px. It works well in every other view, but not mobile.

Wondering if it’s possible to have the mobile grid auto-populate and keep to the square size when a new item (album) is created.

Thanks in advance for your help.

Here is my site Read-Only: Webflow - Diana Bernier Photography

2

Hi @db2022 I think that’s possible.

Grids are super powerful, but I also find them to be one of the most complex areas of Webflow.

I don’t believe I 100% nailed it, but with a small bit of effort I’m fairly close to what you’re asking.

One of the things I notice is your “fr” (fractional) units. Their purpose is to auto-calculate things for you, you don’t want that.

Screen Shot 2023-03-01 at 9.21.52 AM
Screen Shot 2023-03-01 at 9.21.52 AM1020×1104 156 KB

Instead try setting your min/max to your hard coded 120px, and make sure “auto-fit” is unchecked.

Before:

Screen Shot 2023-03-01 at 9.22.02 AM
Screen Shot 2023-03-01 at 9.22.02 AM1202×976 135 KB

After:

Screen Shot 2023-03-01 at 9.22.11 AM
Screen Shot 2023-03-01 at 9.22.11 AM1048×1018 131 KB

Before:

Screen Shot 2023-03-01 at 9.22.23 AM
Screen Shot 2023-03-01 at 9.22.23 AM1052×658 85 KB

After:

Screen Shot 2023-03-01 at 9.23.51 AM
Screen Shot 2023-03-01 at 9.23.51 AM1450×912 146 KB

Screen Shot 2023-03-01 at 9.23.56 AM
Screen Shot 2023-03-01 at 9.23.56 AM1290×886 140 KB

Results:

Screen Shot 2023-03-01 at 9.23.45 AM
Screen Shot 2023-03-01 at 9.23.45 AM1124×942 144 KB

I think this is what you’re after?

Screen Shot 2023-03-01 at 9.24.22 AM
Screen Shot 2023-03-01 at 9.24.22 AM1920×1009 97.7 KB

Also, I’d suggest setting your min/max on the image sizes for both width and height:

Screen Shot 2023-03-01 at 9.24.51 AM
Screen Shot 2023-03-01 at 9.24.51 AM1920×944 85.2 KB

Hope that helps!

3

Sorry @ChrisDrit you have been faster :crazy_face: I have a slightly simpler solution.

4

Don’t be sorry! Your solution rocks! Happy you posted it :smile:

1 Like
5

Amazing!!! Thanks to both of you (@ChrisDrit and @Stan)! I’m teaching myself and am absolutely addicted to Webflow and am so appreciative of the help that I receive on this forum.

All the best,
Diana