What is a workaround for creating a fullscreen fluid grid with different width and height items in Webflow's collection list?

To create a fullscreen fluid grid with differently sized items (e.g., varying widths and heights) from a Webflow CMS Collection List, you'll need to use a workaround since Webflow’s native Collection List Grid doesn’t support true masonry or asymmetrical layouts.

1. Use CSS Grid or Flex with Manual Sizing

• Switch the Collection List layout to CSS Grid or Flexbox mode.
• If using Grid, allow items to span multiple columns/rows manually (in the Designer) or use auto-placement for dynamic flow.
• If items need different dimensions, you'll manually set height and width styles using CMS fields (like a “Size” option) mapped to classes or conditional visibility.

2. Add a "Size Class" via CMS and Use Conditional Styling

• Add a “Size” field in your CMS (e.g., "small", "medium", "large").
• In the Collection Item, add combo classes like .item.small, .item.medium, etc.
• Use custom styles in Webflow Designer to size each variation differently (e.g., small = 1fr, large = 2fr).

3. Implement Custom JavaScript Masonry Layout

• Webflow doesn’t natively support fluid masonry or tile layouts for CMS items, so use a custom JavaScript library like Masonry.js or Packery.

• In Page Settings > Before , include the external script via CDN.

• Use a custom script (referencing your Collection List’s class) to initialize the Masonry layout.

  Example: After assigning a class like .grid-wrapper to the Collection List, your script would initialize Masonry on document ready.

4. Enable Fullscreen Width & Height

• Set the body or main section to 100vw width and 100vh height.
• Configure the Collection List Wrapper and Items to grow, shrink, or wrap using Flex or Grid options.
• Make sure to use viewport-relative units (vw, vh) for true fullscreen behavior.

5. Use Webflow's Native Grid + Custom Positioning (Limited Control)

• You can build a 12-column grid and manually place Collection Items using Grid Child position overrides, but this only works for static layouts or items with expected positions.

Summary

To create a fullscreen fluid grid in Webflow with variable-sized CMS items, combine a CMS “Size” field with Grid/Flexbox layouts and custom classes. For full dynamic flow and masonry-style behavior, you’ll need to integrate a custom JavaScript solution (like Masonry.js) since Webflow’s native grid is uniform.