How to Style and Size Divs in Responsive CMS Grid


I’m envisioning a responsive CMS collection to house my image gallery for my new photography website. I’ve made some progress thanks to Youtube and the help of this community (which is hugely appreciated). I’ve hit a roadblock, however, when it comes to styling the layout of the CMS collection as a grid.

I’d like to be able to manually drag the size of my Div which houses each respective image (this is simple to do with a normal grid - just create a normal grid, drag your div, set the the background image and you’re done). The page layout would look something like this which depicts the ability to manually size different images depending on their aspect ratio and pull in the CMS information into a dynamic modal:

I seem to have gotten the modal functionality set up but I can’t for the life of me figure out why this CMS grid and its Divs won’t act the same as a “normal” grid. Here’s what I have now (images that stack vertically and that I’m not able to drag to be side by side):

I’m hoping there’s a simple solution or guide for this - perhaps I have conflicting classes, my alignment isn’t set correctly, etc. I’d also like to know why my modal wrapper div doesn’t reach the bottom of the page on a desktop layout:

Thanks so much to whoever is able to offer some insight on this. I’m new to Webflow and have been pulling my hair out trying to figure out this CMS grid layout stuff.

Here is my site Read-Only:


While using a grid on a static page you can style it to whatever size you wish from 2/3 rows or columns or etc. However, when you are styling with collections, keep in mind that when you style for one, you are styling for all. Even though you may see different items, the styling is only being done to one and then duplicated. The only way to get different styling patterns (similar to a static page) you will have to add custom code to your project.

Please let me know if you have any other questions,

~ Happy Designing ~