How to make a dynamic image grid with varying sized images

Design help General
1

Hi Everyone,

On Webflow’s CMS feature page under the “Write and edit–right on the page” heading there is this image, what I’m wanting to find out how to make is actually the image layout in that picture.

It displays a large selection of what I would assume to be clickable images of meals, the images are either one of two varying sizes and all fit neatly together in a grid format.

Is anyone aware of how this could be accomplished dynamically in webflow for automatically populating the images and links from a collection?

EDIT

I’ve quickly thrown together a test site of what I’m trying to accomplish:
https://preview.webflow.com/preview/dynamic-abstract-grid?preview=277341b318b712e817d3938a6d2ea5c6

On the left is a static grid I pieced together to simulate how I want things to look, with featured items being larger than all of the others.

On the right of the screen is a dynamic list pulling in the info from a collection I made.

I have two issues I can’t work out:

  1. How to adjust the size of the list item when the “featured” switch is “on”
  2. How to get different sized boxes to flow around each other nicely in a grid.

1000×363 294 KB

The only way I was able to get the static grid to work is the featured items are actually overlapping two empty divs in the next line down.

It is at all possible to rig this up to work instantly with dynamic content lists?

1 Like
2

Hi Oram,

First, place a 2 column element

  1. Place a 2-column element
  2. Place in the first column two 2-column elements
  3. Place in the second (right) column first a 3-column element and then a 2-column element

Place the linkbox with images, make the proportions and ready.

If you can’t findout, let me know!

3

Hi @oramsdesign, Can you please update your post with some more info? Things like screenshots and read-only links allow everyone to help you faster.

In the meantime, this demo kit should be helpful:

Demo: https://webflow.com/website/Demo-Kit
Page Title: Grid layout

*Use a dynamic list with percentage width settings

4

@thewonglv I’ve just updated the post now with more info and screenshots.

5

Hi Oram, i did not have much time this morning, but here a little fast example! :smiley:

enter link description here

1 Like
6

Hi Koen, that is awesome! Thanks so much! :smile:

7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.