How can I create a section in Webflow that includes a collection list with 5 items displayed in the same row, where the third item is larger than the others?
TL;DR
- Use Flexbox to display 5 CMS items in a row by setting the Collection List to flex, no wrap, with fixed widths for items.
- Add a CMS field for position and apply conditional visibility and a combo class to the third item to style it larger.
To create a Collection List in Webflow that displays 5 items in a row with the third item styled larger, use Flexbox and conditional styling based on the item’s position.
1. Set Up the Collection List
- Add a Collection List to your page from the Add panel.
- Bind it to your CMS Collection containing the items you want displayed.
- In the Collection List Settings, limit the number of items to 5 if necessary.
2. Style the Collection List as a Flex Container
- Select the Collection List Wrapper.
- Set Display to Flex, Direction: Row, and Wrap: No Wrap under the Style panel.
- Set Justify and Align as needed (e.g., Center, Start).
3. Style the Collection Items
- Select a Collection Item.
- Give it a custom class name (e.g.,
collection-item). - Set a fixed width (e.g., 20%) so all 5 items fit in one row.
- Optionally add padding, margin, or background color.
4. Create a Combo Class for the Third Item
Since Webflow doesn’t have a native :nth-child() selector for dynamic lists, follow this workaround:
- Add a Custom Field in your CMS collection called
Position(type: Number or Text). - Assign numbers to items manually in the CMS (1 to 5).
- Back in your Webflow design, select the item’s outermost element (inside the Collection Item).
- Add conditional visibility:
- Display this element only when
Positionequals3. - Give this element a combo class (e.g.,
collection-item large). - In this combo class, increase its width (e.g., 28–35%) and adjust height, typography, or padding to visually distinguish it.
5. Adjust Surrounding Items as Needed
- Reduce the width of the other items slightly (e.g., 16–18%) so everything fits in one line.
- Make sure there’s no wrapping or overflow issues by ensuring the total width doesn’t exceed 100%.
Summary
To display 5 CMS items in a row with a larger 3rd item, use Flexbox for layout and apply a combo class with conditional visibility based on a CMS field to style that third item differently.