Tutorials
|
Mar 7, 2017

Designing dynamic lists with flexbox

Take more control over your dynamic list layouts with a little flexbox.
When you’re laying out content pulled in via a dynamic 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 dynamic list layouts to a more fluid, flexbox-powered grid layout.

Step 1: Set your dynamic list layout to full width

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

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

  1. Dynamic List Wrapper
  2. Dynamic List
  3. Dynamic item

First, select your dynamic list wrapper, then go to the Settings tab.

Set the dynamic list layout to full-width
Set the dynamic 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 dynamic items, allowing each item to stretch across its own row.

Step 2: Flex your dynamic list

Now, select the dynamic list itself (not the wrapper).

Next, select your dynamic list, then switch over to the Styles panel.

Give your dynamic list a class name and set its Display Setting to flex.

Give your dynamic list a class name, then give it the flex display setting. This will cause all of your dynamic 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.

Step 3: Add fluid widths to your dynamic items

Now select the dynamic item.

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

Once you've named your dynamic 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!

Get our top web design content in your inbox
Just like over 500,000 other designers.

Thanks! Check your inbox to confirm your subscription.

Oops! Something went wrong while submitting the form

We hate spam just as much as you do.
Nelson Abalos Jr.

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

What's Webflow?

It’s a web design tool, CMS, and hosting platform in one.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

Related Articles
Design process
May 2, 2017
How to build a living style guide in Webflow
Bring more consistency to your websites — and speed up your workflow — by building a living style guide for every site.
Announcements
Apr 5, 2017
How we’re making Webflow Hosting even more reliable
Find out what we learned from February 28th's Amazon Web Services outage — and how we're improving Webflow Hosting to prevent future outages.
Entrepreneurship
Apr 3, 2017
How to power your freelance web design business with Webflow – for free
Find out how to get your web design business up and running with Webflow. Without paying a cent.
Get our top web design content in your inbox
Just like over 500,000 other designers.

Thanks! Check your inbox to confirm your subscription.

Oops! Something went wrong while submitting the form

We hate spam just as much as you do.