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?

To create a collection list in Webflow with 5 items in one row where the third item is styled larger, you’ll need to use a combination of Collection List settings, Flexbox layout, and CSS nth-child styling.

1. Set Up the Collection List

• Drag a Collection List into your section.
• Bind it to the desired CMS Collection.
• Limit the items to 5 in the Collection List Settings.

2. Configure the Layout with Flexbox

• Select the Collection List Wrapper.
• Set Display: Flex.
• Choose Direction: Row.
• Enable Wrap: Off to keep all 5 items in one row (they must fit within the container).
• Set Justify: Space Between or Space Around for spacing as needed.

3. Style the Collection Item

• Select the Collection Item element.
• Set a base width for all items (e.g. 18–20% to fit 5 items in a row).
• Add necessary padding, background, or borders as needed.

4. Target the Third Item with Custom Styling

• Add a custom class to the Collection Item, for example: collection-box.

• Add a custom embed component on the page (from the Add Panel > Embed), and insert this inline CSS:

  ``

• Optionally add transition effects or increase width instead of scaling depending on your design.

5. Adjust Spacing and Overlaps (If Needed)

• If scaling causes layout shifts or overlaps:
• Add margin-left and right to the third item to compensate.
• Use z-index to bring it above others.
• Ensure parent has position: relative if you use positioning.

Summary

To create a row of 5 collection items where the third is larger, use a Flexbox layout, limit to 5 items, set a base uniform width, then target the third item with nth-child(3) for custom styles like scale or width increase. Use custom CSS as needed via Webflow’s Embed component.