Various width but same height for collection list items?

[anthonysalamin]

Hello,

a client is requesting a layout I have never done before… I know how to do masonry layout but this means that the width of the items are always the same for every item, only the height changes like shown in this perfectly fine woring example here using just a few lines of css code:

k

However… my client insist to have the following layout, where the width of the items vary but the height is fixed, like from this UI design:

Is there a simple trick I might be missing do get this type of unconventional layout ? I am asking beause it seems Webflow collection list always defaults the width of its collection item to the same.

Thank you for your help !
Anthony

[Punt (Patrick Piechnick)]

If it’s a collection list , you probably can style the even and odds states differently in a flex box wrapper that keeps adding items is my guess.

[anthonysalamin]

Thank you @Punt , the problem is sometimes the images are randomly placed meaning the vertical and horizontal images are not necesseraliy always one after the other.

[webdev (Jeff Selser)]

You should then use aspect ratio to control the image display if you can’t control the actual image dimensions.

[memetican (Michael Wells)]

If you look at masonry layouts, they accommodate the variation in image sizes by having a uneven bottom border.

Here, you’re doing a rotated masonry, so if all images are full-sized, and your row heights are even, then you’d have an uneven right border.

Basically that variablity has to go somewhere, and on top of that you need to contend with responsiveness and your total image count to achieve the full-rectangle gallery effect.

There are ways to make it perfectly rectangular though.

You can either-

1. Dictate and control the exact aspect ratio and sequencing of the images, like in your image above, or
2. Dictate display aspect ratios, and control the arrangement per line ( 2 landscape, 2 portrait / 1 landscape, 1 portrait / etc ) But you don’t necessarily show the whole image- just a centered crop using aspect ratio and object-fit cover.

@anthonysalamin

the problem is sometimes the images are randomly placed meaning the vertical and horizontal images are not necesseraliy always one after the other.

This caveat breaks #1 as an option, so I’d probably go for #2.
Here you care about the presentation sequences ( landscape, portrait, repeating ), but since you’re doing an object-fit cover crop, it doesn’t actually matter what the image actually is.

It’s a hack… it’s reasonable to implement without some wacky size-sorting algorithms, and achieves the presentation goal above.

I’d probably randomize the list but force a fixed repeating arrangement of landscape, portrait, landscape, portrait.

You can control that variation by CSS using :nth-item, and although some landscape images would be cropped to portrait, etc, you’d have a nice neat looking layout, with perfect edges ( if you have enough images to fill the space ).

A lightbox could show the full view.

[anthonysalamin]

Thank you gentlemen, apprciate the insights !

I have found an alternative route, inspired by a youtube video I found using a grid layout for the collection list and just a couple of CSS line to expand an item on two columns or 1 column based on its CMS driven data attribute.

Basically, within the CMS I specify for each item if it’s wide or tall, the css then expand the collection item on either 2 or 1 column. I set the image to take 100% width and 100% height with an object-fit property set to “cover”.

Luckily, works like a charm. It’s also customizable for each breakpoint, just need to adjust the grid amount of columns and write additional CSS media queries like so:

 @media screen and (min-width: 768px) {
    [item-style=wide] {
      grid-column-start: span 2;
      grid-column-end: span 2;
      grid-row-start: span 1;
      grid-row-end: span 1;
    }
    [item-style=tall] {
      grid-column-start: span 1;
      grid-column-end: span 1;
      grid-row-start: span 1;
      grid-row-end: span 1;
    }
  }

Here is the read-only link if this can help someone.

Here some screenshots: