What is a workaround for creating a fullscreen fluid grid with different width and height items in Webflow's collection list?
TL;DR
- Use a regular Collection List with custom CSS Columns for a fluid, fullscreen grid layout.
- Add embedded CSS to define column count and gaps, ensure responsive behavior with media queries.
- Style CMS items with fluid height using auto or padding tricks for dynamic content sizing.
- Optimize performance with lazy loading and image compression.
- Optionally, integrate Masonry.js for greater layout control using JavaScript.
Creating a fullscreen, fluid grid with varying item sizes using Webflow CMS requires a workaround because Webflow's native Collection List doesn't support CSS grid auto-placement for variable-sized items out of the box.
1. Use CSS Masonry with Columns (Workaround)
- Use a regular Collection List and set the Collection List Wrapper to
display: blockorflex(not Grid). - Set the Collection List to
display: blockand apply a CSS Columns layout using custom CSS. - Place your Dynamic Item inside and style it to be responsive and fluid in width/height.
2. Embed Custom CSS for Columns
- Add an Embed component (from Add Elements → Embed) and include custom styles like:
- Selector:
#collection-list-id(replace with actual element ID or class) - Styles:
columns: 4; column-gap: 24px;to create a fluid, masonry-like structure. - You can also add media queries to make the number of columns responsive.
3. Ensure Items Are Fluid in Height
- Each CMS Item should not have fixed heights. Set them to
autoor usepaddingfor aspect ratio control (e.g., padding-bottom trick). - For variable height: let the content dictate height (e.g., rich text, images, descriptions).
4. Use Lazy Load and Optimized Content
- Enable lazy loading for images (
loading="lazy") to maintain performance. - Compress and crop images in CMS or use Webflow's built-in image options for better layout behavior.
5. Optional: Add Masonry with JavaScript for Precision
- If more control is needed, add JavaScript-based Masonry layout libraries like Masonry.js via Embed.
- Using this with CMS requires extra setup:
- Assign the Collection List a unique class.
- Initialize Masonry with
data-masonryin a script tag after Webflow finishes loading.
Summary
Webflow doesn’t support native variable-size auto-placement in Collection Lists, but using CSS Columns or custom JavaScript Masonry allows you to create a fullscreen, fluid layout with different-width and height CMS items.