Is there a way to set the number of columns in a collection list based on webflow breakpoints, for example, having three columns on desktop and two columns on iPad?

Published on
September 22, 2023

Yes, there is a way to set the number of columns in a collection list based on Webflow breakpoints. Follow these steps:

  1. Add a Collection List element to your page and style it as desired.
  2. Click on the Collection List element to bring up the settings panel on the right.
  3. Under the Layout tab, you'll find the Grid option. Enable it by clicking on the checkbox.
  4. Once the Grid option is enabled, you'll see a Grid Layout section appear below.
  5. In the Columns field, enter the number of columns you want to display on desktop (e.g., 3 for three columns).
  6. Now, click on the Breakpoints dropdown menu to set the number of columns for each breakpoint.
  7. Choose the desired breakpoint (e.g., Tablet) and enter the number of columns you want to display for that breakpoint (e.g., 2 for two columns).
  8. Repeat the above step for any other breakpoints you'd like to customize.
  9. Preview your site to see the collection list adjust based on the specified number of columns at different breakpoints.

By setting the number of columns for each breakpoint, you can create a responsive layout that adapts to different devices and screen sizes.

Additional Questions:

  1. How can I create a collection list in Webflow?
  2. What are breakpoints in Webflow?
  3. How do I style a collection item in Webflow?