Turn a Collection list into a responsive grid
Create a Collection list and turn it into a responsive grid layout that adjusts to fit different screen sizes.
We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
Grid lets you turn content-driven lists like CMS Collections, Ecommerce product lists, and search result pages into responsive grids. And with the magic of auto-fit, you can have "smart" grid layouts that automatically adjust to fit different screen sizes.
To create this layout, you'll:
- Add a Collection list and connect it to one of your Collections
- Design the Collection list item
- Apply the grid layout to the Collection list
- Edit the grid and set up auto-fit to create a fully responsive grid
- Make sure the grid is fully responsive on all devices