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:

  1. Add a Collection list and connect it to one of your Collections
  2. Design the Collection list item
  3. Apply the grid layout to the Collection list
  4. Edit the grid and set up auto-fit to create a fully responsive grid
  5. Make sure the grid is fully responsive on all devices

Table of contents

Continue learning

Oops! Something went wrong while submitting the form.

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top