Off grid layout

Design help Layout & Design
1

Hello everyone,

Hello, I have a question about webflow layout.
Can I make a webflow site that will have “zig zag” style posts on the homepage like e.g. www.oma.com, or all new posts will be the same size and will be aligned side by side in the grid?

thanks a million!
Lukas

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi,

You can shift your items by adjusting the margins and scale them using transform to make them different in size. If you inspect the OMA site, it is using absolute positioning for the items and adjusting the margins to achieve that.

4

Hi @cklai sorry to disturb again, does your suggestion works with CMS collections as well? many thanks!

5

Hi @Lukas_Burda, the following official Webflow tutorial might help to have more variation in the styles of CMS items but only limited to first, last, off and even items.

However, if you want to style a specific item of the list, you can try to do that with custom code. Say if you want to style the 6th item in the CMS list, the following CSS example code will define the styles of the 6th child element with the class “your-cms-class”.

<style>
  .your-cms-class:nth-child(6) {
    /* CSS code goes here */
    position: absolute;
    left: 8vw;
    top: 600px;
    width: 35vw;
  }
</style>