Is it possible to stretch a single column and row across multiple using the multiple image block on a CMS page in Webflow, similar to having a longer image in the middle of the grid?
TL;DR
- Use a Collection List connected to a CMS Multi-Image field inside a custom CSS Grid instead of Webflow’s native Multi-Image block for precise layout control.
- Apply combo classes or conditional visibility to specific images, using custom fields or attributes, to make them span multiple columns or rows in the grid.
Yes, it’s possible to stretch one image across multiple rows and/or columns in a CMS-connected grid in Webflow, but it requires custom layout control using CSS Grid and conditional element styling.
1. Use a CSS Grid Layout Instead of the Webflow Image Gallery
- Do not use the native “Multiple Image” field block inside a Collection List if you want specific layout control.
- Instead, connect the Collection List component to a CMS Multi-Image field and manually build a layout using a Grid or Flexbox, depending on your design needs.
2. Manually Position Images in Grid Cells
- Once your grid is set up, drag a Collection List Wrapper into a grid cell.
- Bind it to the Multi-Image field (you’ll see one image rendered per item).
- You cannot directly position one dynamic item differently based on CMS settings, but you can do it using a combo class or conditional visibility.
3. Target a Specific Image to Span More Columns/Rows
- CMS items don’t know their repeat index by default, but you can simulate this:
- Add a custom field (e.g., “Highlight This Image”) to your Multi-Image field or create a connected gallery reference to another collection instead of the native Multi-Image field (which does not support custom fields on each image).
- Use conditional visibility or combo classes to apply a special class to specific images.
- On that special class (e.g.,
.highlight-image), set a custom grid-area or grid-column: span 2 and/or grid-row: span 2 in Webflow’s style panel.
4. Optionally, Add a Custom Attribute or Use JavaScript
- Since native CMS Collection Lists don’t expose item indexes (like image #3 or #5), you can:
- Add a custom attribute or combo class manually in the CMS to identify the image to be stretched.
- Or, use custom JavaScript to detect the nth-child image and apply a class after page load (less ideal for performance).
Summary
To stretch one image across multiple grid cells on a CMS page, manually build a CSS grid layout and use conditional styling or classes to make specific images span multiple rows/columns. The native “Multiple Image” field block gives limited layout control, so a custom grid tied to a Collection List is the recommended method.