Turn a collection list into a responsive grid

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Turn a collection list into a responsive grid

Grid 2.0 makes it easy to 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 indeed fully responsive on all devices
Auto-fit makes your grid responsive without the need to adjust the grid on devices.

Dense


Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form