How can I create a dynamic grid layout in Webflow that automatically populates images and links from a collection, where some images are larger and others flow around each other nicely?
TL;DR
- Create a CMS Collection with image, link, and optional size fields, then connect it to a Collection List on your page.
- Style the Collection List as a CSS Grid, use combo classes for size variations, adjust spans for larger items, and enable responsive behaviors and grid auto-flow: dense for a dynamic layout.
To create a dynamic, auto-populating grid layout in Webflow that pulls from a CMS Collection and allows variable-sized images to flow around each other, you’ll need to use the CMS with CSS Grid and Responsive settings.
1. Set Up Your CMS Collection
- Create a CMS Collection with fields for the Image, Link (URL or Page Reference), and optionally a Size category (e.g., Small, Medium, Large).
- Add real content so you can preview layouts with actual data.
2. Add a Collection List to Your Page
- Drag a Collection List into your layout.
- Connect it to your CMS Collection.
3. Configure the Collection List as a CSS Grid
- Select the Collection List Wrapper (not the individual item).
- In the Style panel, set the display to Grid.
- Define the number of columns (e.g., 3 or 4) and let rows auto-fill.
- Use Grid Gap for spacing between items.
4. Style Collection Items Dynamically
- Inside the Collection Item, add an Image and a Link Block.
- Bind the Image to your image field and the Link Block to your URL or Page Reference.
- If using a "size category" field, add a combo class based on that field (e.g., Small, Medium, Large).
5. Adjust Grid Item Size Based on CMS Field (Optional)
To make certain images larger:
- Make sure your Collection Item uses combo classes (e.g.,
.collection-item.large,.collection-item.small). - In the Style panel, customize each class:
- For
.large, set the grid-span via Grid Row Span and Column Span (e.g., span 2 columns and 2 rows). - For
.small, keep default span (1x1). - These will only work well with a manual grid layout or CSS Grid auto-placement that respects item sizing.
6. Enable Responsive Behavior
- Adjust grid settings at breakpoint levels:
- Reduce number of columns on smaller screens.
- Consider switching to Flexbox or a single column if needed for mobile.
7. Optional: Advanced Auto-Masonry Effect (No External Scripts)
While Webflow doesn’t support Masonry layout out-of-the-box, CSS Grid offers a close solution:
- Enable Grid Auto-Flow: Dense to fill gaps more efficiently.
- This helps smaller items wrap into gaps left by larger grid-spanning items.
Summary
To build a variable-sized, image grid in Webflow:
- Use a CMS Collection and connect it to a Collection List.
- Style the collection list with CSS Grid, and use combo classes or conditional visibility for size differences.
- Tune layout using grid span and auto-placement to create a flowing, dynamic look.
This method builds a fully dynamic, CMS-driven layout without custom code or external libraries.