What is a workaround for creating a fullscreen fluid grid with different width and height items in Webflow's collection list?
- Set Collection List Wrapper to CSS Grid with auto-fit columns and auto rows.
- Add CMS fields to define each item's column and row span.
- Use Embed elements or custom attributes with inline styles or scripts to apply spans dynamically.
- Make the grid fullscreen and responsive using 100vw/100vh sizing and fluid item dimensions.
- Inject global CSS or JavaScript via Page Settings if additional styling logic is needed.
To create a fullscreen fluid grid with varying item sizes using Webflow’s Collection List, you need to combine CSS Grid layout with specific styling techniques that allow items to span multiple rows and columns.
1. Use CSS Grid on the Collection List Wrapper
- Select your Collection List Wrapper and set its Display to Grid in the Style panel.
- Define a grid with auto-fit or auto-fill columns using manual track settings, such as:
- Columns: repeat(auto-fit, minmax(200px, 1fr))
- Rows: Set to auto (will be handled by content or custom sizing).
2. Enable Manual Sizing on Collection Items
Webflow doesn’t directly let you span grid items across multiple rows/columns dynamically based on content, but you can manually size them based on Collection fields.
Add custom fields in your CMS for:
Number of columns to span (e.g., 1, 2)
Number of rows to span (e.g., 1, 2)
With those fields, give each Collection Item a custom CMS class name or embed attributes using a custom attribute or a script.
3. Apply Custom Styles with Embed Code or Attributes
- Place an Embed element within each Collection Item and inject custom CSS or
styleattributes using dynamic fields: - Example:
<div style="grid-column: span 2; grid-row: span 2;"> - Alternatively, use custom attributes (like
data-col,data-row) and apply custom JavaScript to read and apply these values after page load.
4. Make Grid Responsive and Fullscreen
- Set the Section or parent container to 100vw width and 100vh min-height.
- Ensure Collection Items have 100% width and height where applicable, and leave overflow visible or auto as needed.
5. Use Webflow's Custom Code Injection if Needed
- Go to Page Settings > Custom Code and inject global CSS that targets specific Collection Item classes or attributes to apply the appropriate
grid-rowandgrid-columnspan values.
Summary
To build a fullscreen fluid grid with differently sized CMS items in Webflow, use CSS Grid on the Collection Wrapper, create CMS fields to define item spans, and use custom styling via inline styles, attributes, or scripts to allow items to span multiple rows/columns.