Can I create an uneven grid layout using a CMS collection in Webflow?

Yes, you can create an uneven grid layout using a CMS Collection in Webflow by customizing grid areas or applying conditional classes and sizes dynamically.

1. Use CSS Grid Layout in a Collection List

• Add a Collection List to your page and connect it to your CMS Collection.
• Within the Collection List Wrapper, set the display to Grid from the Style panel.
• Define your grid columns and rows (e.g., 3 columns, auto-flowed rows).

2. Customize Individual Grid Items

• Webflow doesn’t allow you to target individual CMS items directly by their index, but you can achieve variation with:

• Collection-based conditional visibility

• Custom fields like “Post Type,” “Featured,” or “Layout Style”

• Create extra fields in your CMS (e.g., Featured = true/false) and use them to apply different style classes or spans.

3. Let Items Span Multiple Columns or Rows

• Inside your Collection Item:
• Add a div block around your content and give it a class like grid-item.
• Use conditional visibility or combo classes (e.g., grid-item featured) to modify the layout.
• Manually set styles:
• Grid Column Span (e.g., Column span 2)
• Grid Row Span (e.g., Row span 2)

4. Use Custom Code (Optional)

• If you need more granular control, inject custom CSS targeting specific items via custom fields with classes or data attributes.
• Common use: adding a class via a CMS field like style-class and using CSS to adjust layout (e.g., .span-2 { grid-column: span 2; }).

5. Alternative: Use Flexbox with Varied Heights

• If CSS Grid becomes limiting, you can also use flexbox with wrapping and variable item sizes (via images or padding) to create a Pinterest-style uneven layout.

Summary

Yes, you can build an uneven CMS-driven grid layout in Webflow by combining Grid layout, CMS conditional styling, and column/row spanning. Custom fields and styling logic give you the control needed to vary layout per CMS item.