Keep an eye on your inbox!
Hmm, that didn't work. Try again?

Designing Collection Lists with flexbox

Take more control over your Collection List layouts with a little flexbox.

Nelson Abalos Jr.
March 7, 2017
Tutorials

When you’re laying out content pulled in via a Collection List, you might notice content of different lengths breaking your tidy grid. Thankfully, flexbox can help you fix this problem, giving you more control over your layout, especially on different devices.

 

This quick tutorial will show you how easy it is to convert your existing Collection List layouts to a more fluid, flexbox-powered grid layout.

Step 1: Set your Collection List layout to full width

Select Dynamic List wrapper in Navigator
Start by selecting the Collection List wrapper in the Navigator (or on the canvas).

We’ll be styling three different elements throughout this tutorial:

  1. Collection List Wrapper
  2. Collection List
  3. Collection item

First, select your Collection List Wrapper, then go to the Settings tab.

Set the dynamic list layout to full-width
Set the Collection List wrapper's layout to full-width in the Settings tab.

Then set the layout to full-width. This clears out the the floating columns applied to your Collection items, allowing each item to stretch across its own row.

Step 2: Flex your Collection List

Now, select the Collection List itself (not the wrapper).

Next, select your Collection List, then switch over to the Styles panel.

Give your Collection List a class name and set its Display Setting to flex.

Give your Collection List a class name, then give it the flex display setting. This will cause all of your Collection items to bunch up together, each in their own column, in one row.

Now make sure those children wrap.

Now tick the the Wrap Children checkbox.

Unleash your creativity on the web

Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow.

Get started for free
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Step 3: Add fluid widths to your Collection Items

Now select the Collection Item.

Now let’s style those Collection items themselves. Select the Collection Item in the Navigator, then switch to the Styles tab and create a new class.

Once you've named your Collection Item's class, click the icon to access the advanced sizing options in Flex Child Settings.

Next, under the Flex Child Settings, click the cog icon to access the Advanced Sizing settings. In the third field, you can set a percentage for the width of your columns.

In the Advanced Sizing UI, give each item a percentage-based width.

You can set your fluid grid to have any number of columns per row. For example:

  • 20% = 5 columns
  • 25% = 4 columns
  • 33.3333% = 3 columns
  • 50% = 2 columns
  • 100% = 1 column

Finally, toggle through each breakpoint to set the right width for each viewport.

Step 5: Preview your work and enjoy

Switch to preview mode and enjoy your new, more flexible layout!

Nelson Abalos Jr.

Customer Support Hero. Host of the Webflow Workshops. Follow me @thepixelgeek.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free

Designer

Bring your wildest web designs — and client sites — to life, without writing code.

CMS

Build completely custom content structures for client sites and prototypes.

Hosting

World-class web hosting at your fingertips, without all the usual hassles.