How can I create an irregular grid using collection list in Webflow with two different image sizes (horizontal and vertical) while maintaining their aspect ratio and filling the whole height of the grid's row?

To create an irregular grid using a collection list in Webflow with two different image sizes (horizontal and vertical) while maintaining their aspect ratio and filling the whole height of the grid's row, you can follow these steps:

1. Set up Collection List:

• Create a Collection List wrapper on your page where you want to display the grid.
• Connect the Collection List wrapper to the desired CMS collection that holds the images you want to display.

1. Design the grid layout:

• Set the Collection List wrapper to display as a grid.
• Define the number of columns you want in the grid.
• Adjust the grid's row height to match the desired image proportions.
• Set the gap between the grid items.

1. Add grid items inside the Collection List wrapper:

• Add div blocks as grid items inside the Collection List wrapper.
• Style the grid items as flex containers.

1. Design the image containers:

• Add image containers inside the grid items.
• Set the image containers to display as flex items and adjust their alignment.

1. Style the images:

• Apply a background image to the image containers.
• Use the "Cover" background image option to maintain aspect ratio and fill the whole height of the grid row.
• To use different image sizes for horizontal and vertical images, you can create two different image fields in your CMS collection. Then, conditionally display the appropriate image field based on the image's orientation using a custom code or with interactions.

1. Configure the Collection List:

• Go to the Collection List settings panel.
• Bind the Collection List to the CMS collection and apply any necessary filters or sorting options.

1. Preview and fine-tune:

• View the grid in the Preview mode to see how the images are displayed.
• Adjust the styles and settings as needed to achieve the desired outcome.

By following these steps, you can create an irregular grid using a collection list in Webflow with two different image sizes while maintaining their aspect ratio and filling the whole height of the grid's row.

Additional Questions:

1. Can you create an irregular grid using Webflow's Collection List feature?
2. How do I maintain aspect ratio and fill the height of an image within a grid row in Webflow?
3. What are the steps to create a dynamic grid layout in Webflow with different image sizes from a CMS collection?