Is there a way to make all items in a CMS collection stretch to the same length in Webflow?

Published on
September 22, 2023

Yes, there is a way to make all items in a CMS collection stretch to the same length in Webflow. You can achieve this by using CSS Flexbox. Follow the steps below to implement this:

  1. Open your Webflow project and navigate to the page where the CMS collection is displayed.
  2. Select the CMS collection wrapper element.
  3. In the right sidebar, go to the Style tab and click on the '+' to add a new style rule.
  4. Add a class name to the CMS collection wrapper element.
  5. With the newly created class selected, go to the Display settings and set the Position to Relative.
  6. Under the Flex settings, set the Display to Flex.
  7. Set the Flex Wrap to Wrap.
  8. Adjust the Justify and Align settings to position the items as desired.
  9. Now, select the CMS item element within the collection.
  10. Add a class name to the CMS item element.
  11. With the newly created class selected, go to the Display settings and set the Position to Relative.
  12. Under the Flex settings, set the Flex to 1 1 Auto. This will make all the items in the collection stretch to the same length.
  13. Repeat steps 9-12 for each CMS item element in the collection.
  14. Preview the page to see the changes made.

By following these steps, you can ensure that all items in the CMS collection stretch to the same length on your Webflow site.

Additional Questions:

  1. How can I make all items in a CMS collection have equal height in Webflow?
  2. Can I customize the layout of CMS collections in Webflow?
  3. Are there any other ways to control the layout of CMS collections in Webflow?