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 Grid layout for your Collection List and set desired columns and rows.
- Isolate the featured item using filtering or conditional visibility.
- Manually define the featured item's column and row span using grid positioning controls.
- Optionally control visibility dynamically via a CMS "featured" field.
Yes, it is possible to stretch a single item across multiple rows or columns in a CMS-powered grid layout in Webflow by customizing the grid and using grid positioning on Collection Items.
1. Use a CSS Grid Layout for Your Collection List
- Wrap your Collection List in a Grid layout, not Flexbox.
- Select your Collection List Wrapper, and in the Style panel, set Display: Grid.
- Set the number of desired columns and rows (e.g., 3 columns, auto or fixed row counts).
2. Enable Manual Grid Positioning for Collection Items
- Webflow automatically places Collection Items in the grid, but you can override this by selecting a specific Collection Item (you'll need to unlink the item from repeat mode using conditional visibility or filtering).
- To isolate an item, use filtering so that only a specific CMS item (e.g., your "featured" or "middle" image) is targeted.
- Alternatively, use conditional visibility or duplicate the Collection List (one for the special item, one for the rest).
3. Set Specific Grid Positions for the Featured Item
- Select the featured Collection Item you want to stretch across multiple cells.
- Under the Style panel, find the Grid Positioning section.
- Set Manual Start and End for Column and Row:
- For example: Column Start: 2, Column End: 4 will stretch the item across 2 columns.
- Row Start: 1, Row End: 3 will stretch the item down across 2 rows.
- Set the item’s width and height to 100% to fill the grid area.
4. Handle Overlaps and Z-Index (Optional)
- If other Collection Items are in the same grid and overlapping occurs, adjust their Column/Row positioning or the z-index of elements.
- Consider separating special grid layout from the main CMS grid if dynamic arrangements get too complex.
5. Use Conditional Visibility for Dynamic Control
- To make this layout CMS-driven, add a "featured" switch or field in your CMS.
- Apply conditional visibility: If “featured = true,” show the block that stretches. Otherwise, hide.
Summary
To stretch a CMS image across multiple grid rows or columns in Webflow, use Grid layout, position the Collection Item manually, and optionally combine with conditional visibility or filtering to isolate the item. This allows you to achieve a dynamic, masonry-style effect with one larger, central image.