How can I create a two column layout in Webflow with a collection list, where the items in the first column wrap and align vertically without gaps?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

To create a two-column layout in Webflow with a collection list, where the items in the first column wrap and align vertically without gaps, follow these steps:

Create a Grid element: Drag and drop a Grid element onto your Webflow canvas. This will serve as the container for your two columns.
Configure the Grid settings: With the Grid element selected, go to the Grid settings in the right-hand panel. Set the number of columns to 2 and adjust the column gap as desired.
Add a Collection List element: Inside the Grid element, add a Collection List element. This will populate the two columns with your collection items.
Configure the Collection List settings: With the Collection List element selected, go to the Collection List settings in the right-hand panel. Connect it to your desired collection and select the appropriate collection template.
Edit the collection template: Double-click on the Collection List element to edit the collection template. This will allow you to design the layout and style of each individual item in the collection list.
Add content to the collection template: Inside the collection template, add the desired elements and content. For example, if you want to display an image and text in each item, drag and drop an Image element and a Text element inside the collection template.
Configure the column placement: With the collection template elements selected, go to the Grid settings in the right-hand panel. Set the Grid placement to determine whether each item appears in the first column or the second column. For the first column, set the Start value to 1, and for the second column, set the Start value to 2.
Adjust the item alignment: To make the items in the first column wrap and align vertically without gaps, go to the Grid settings in the right-hand panel and adjust the Align setting. You can choose different alignment options, such as Start, Center, or End, depending on your design preference.
Customize the styling: Finally, customize the style of your two-column layout by adjusting the dimensions, spacing, typography, and other design properties using the Webflow Designer.

With these steps, you can create a two-column layout in Webflow with a collection list, where the items in the first column wrap and align vertically without gaps.

Additional Questions:

How do I create a three-column layout in Webflow using a collection list?
Can I add interactions to the items in my Webflow collection list?
How do I make my Webflow website responsive for different devices?

How can I prevent my grid in the Statistics section from overflowing its parent container in Webflow?

How can I fix the issue with my full-screen interaction menu in Webflow where the user can still scroll down and see the content below it on the page, even though the wrapper is set to "fixed"?

In Webflow, how can I make images continue to resize when shrinking the browser height, but not the width?

Why is the 100VH minimum height setting not working properly in my Webflow website's opening section, causing the content to be cut off instead of respecting the content inside the section?

How can I re-structure the layers and elements in my Webflow project to ensure the desired effect is working properly? Is there a way to make my two sections full screen size starting from the bottom of the menu until the end of the screen, rather than from the top?

Is there a simple positioning function in Webflow to adjust the layout of check boxes and labels on a form to display 2 or 3 options per line?

How can I embed a responsive video that auto plays and loops on my Webflow site, without experiencing blank spaces on mobile devices?

How can I make the background image in the left column of my 2-column section cover 100% of the vertical height and respond according to the height of the right column's text in Webflow?

How can I position two text blocks over a background image in Webflow?

How can I adjust the size of the background video on smaller screens without it adjusting the desktop view in Webflow?In Webflow, how can I make the "Services" section stack vertically on top of one another in tablet, mobile, and vertical mobile?