Unequal layout of collection list

Hi Webflowers,

I was trying to do some more custom layout for blog overview. I was thinking of making collection items not equally distributed. For example in case of 2 column layout, right column would be moved a bit down comparing to left one. Have a look at the picture and all will be clear :slight_smile:

I’m sure it can be done with JavaScript, wrapping all elements with the same class and giving every second of them different margin. But I would be super happy to make it just with Webflow. Do you guys have some idea :grimacing:?

Best,
Michal

1 Like

@Michal_Maciejewski - Can’t see what you’re doing without you sharing your published site and a read-only link.

Hello @Michal_Maciejewski

You can try using text columns. It’s not the best way, but some people use it.

You can see an example here > http://masonry-blog-style.webflow.io/

It’s not the same layout, but maybe with some work it can be achieved.

Open the read-only link here > https://webflow.com/website/Masonry-Blog-Style

Piter :webflow_heart:

Sorry @webdev but I forgot to mention that I cannot share preview link because of client preferences. I believe that by looking at the screenshot it’s clear what we want to achieve.

@PeterDimitrov thank you for that solution. I need to play with it more to see how much I can control it but I think that’s already something :slight_smile: although if you guys have some other solutions please share them!

Michal :webflow_heart:

1 Like

You could do this with custom code easily.

CloudApp

CloudApp

By CSS

Each even card with more margin (nth-child(even):
https://www.w3schools.com/cssref/sel_nth-child.asp

Very simple structure:
---- Parent: collection list (with class unequal-list)
------- Child: collection item
-------------- div with class card inside (Its better to not add styles for the grid himself)

Before

image

After

Add embed code (Or put this code before body/head). *I like more as embed → easier to make a copy paste + You see the visual change also in the editor.

<style>
.unequal-list .w-dyn-item:nth-child(even) .card {
  background: blue;
  color:white;
  margin-top:20px;
}
</style>

save and close:

Move the margins on mobile

Most of the times you want “stack” “equal” list on mobile. So put the custom code inside Media Queries: (In this example the list uneven only on webflow tablet and desktop).

<style>
@media only screen and (min-width: 768px) {
  .unequal-list .w-dyn-item:nth-child(even) .card {
    background: blue;
    color:white;
    margin-top:20px;
  }
}
</style>

CSS Specificity

Important - add wrapper for the uneven list (Otherwise other collections may change).

flexbox

For “full” freedom use flex grid:
https://webflow.com/blog/designing-dynamic-lists-with-flexbox

image

2 Likes