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
We’ll be styling three different elements throughout this tutorial:
Collection List Wrapper
First, select your Collection 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 Collection items, allowing each item to stretch across its own row.
Step 2: Flex your Collection List
Next, select your Collection List, then switch over to the Styles panel.
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.