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
We’ll be styling three different elements throughout this tutorial:
- Dynamic List Wrapper
- Dynamic List
- Dynamic item
First, select your dynamic list wrapper, then go to 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
Next, select your dynamic list, then switch over to the Styles panel.
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 tick the the Wrap Children checkbox.
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.
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.
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 him @thepixelgeek.
Originally published at webflow.com.