Web Bae•14mo ago

Irregular grid using 1 CMS collection

Hey there! Does anyone know how to achieve this irregular grid with a single CMS collection? https://www.ordinaryfolk.co/

Ordinary Folk

Hi. We are Ordinary Folk. A motion design & animation studio based in Vancouver. We love good work.

10 Replies

Web Bae•14mo ago

@Ander I don’t have my laptop at the moment but from the screenshot it looks like you could use the nth-child CSS pseudo selector

AnderOP•14mo ago

yep, I suck at pseudo-classes, I tryied with chatgpt without success, but I will try again, the father should be a grid or a flexbox? what's your opinion?

Web Bae•14mo ago

I would go for grid @Ander here's how I would do it. https://preview.webflow.com/preview/ander-example-grid?utm_medium=preview_link&utm_source=designer&utm_content=ander-example-grid&preview=0eb4679fad39950b7010c860affa861b&workflow=preview I didn't style for mobile, you'd likely need some media queries for that based on the mobile design.

Web Bae•14mo ago

/* FIRST */
.people_grid .people_item:nth-child(4n+1) .people_name-text {
    transform: translateX(calc(1rem + 100%));
}

/* SECOND */
.people_grid .people_item:nth-child(4n+2) .people_image {
    transform: scale(0.5);
    transform-origin: bottom right;
}

.people_grid .people_item:nth-child(4n+2) .people_name-text {
    top: 50%;
    left: 50%;
    transform: translateY(calc(-2rem));

}

/* THIRD */
.people_grid .people_item:nth-child(4n+3) .people_image {
    transform: scale(0.5);
    transform-origin: top right;
}

.people_grid .people_item:nth-child(4n+3) .people_name-text {
      top: calc(50% - 1rem);
    right: calc(50% + 1rem);
}

/* FOURTH */
.people_grid .people_item:nth-child(4n+4) .people_name-text {
      bottom: 0;
    left: 0;
    right: auto;
    transform: translateX(calc(-1rem - 100%));
}

/* FIRST */
.people_grid .people_item:nth-child(4n+1) .people_name-text {
    transform: translateX(calc(1rem + 100%));
}

/* SECOND */
.people_grid .people_item:nth-child(4n+2) .people_image {
    transform: scale(0.5);
    transform-origin: bottom right;
}

.people_grid .people_item:nth-child(4n+2) .people_name-text {
    top: 50%;
    left: 50%;
    transform: translateY(calc(-2rem));

}

/* THIRD */
.people_grid .people_item:nth-child(4n+3) .people_image {
    transform: scale(0.5);
    transform-origin: top right;
}

.people_grid .people_item:nth-child(4n+3) .people_name-text {
      top: calc(50% - 1rem);
    right: calc(50% + 1rem);
}

/* FOURTH */
.people_grid .people_item:nth-child(4n+4) .people_name-text {
      bottom: 0;
    left: 0;
    right: auto;
    transform: translateX(calc(-1rem - 100%));
}

I used scale but you could target grid spans as well

Web Bae•14mo ago

ok i got excited. Here it is adjusting the grid properties instead of the scale transform! https://preview.webflow.com/preview/ander-example-grid?utm_medium=preview_link&utm_source=designer&utm_content=ander-example-grid&preview=0eb4679fad39950b7010c860affa861b&pageId=65310098188cd884f0c704be&workflow=preview

bonsak•14mo ago

Nice!

AnderOP•14mo ago

Excellent, Keegan! You really went above and beyond with your help! And on top of that, while you're traveling, it's worth double! Thank you very much. I'll let you know here when I implement it.

AnderOP•14mo ago

I did it! https://anderagency.webflow.io/work Thanks a lot Web Bae!

Work - 15+ years of delivering top-notch design.

Looking for a design and webflow agency that can create stunning and user-friendly websites? Look no further than Ander.Agency. We have a team of experienced designers and developers who can create a website that perfectly reflects your brand and meets your business goals. On this page, you can see a list of our best design work. We have worked ...

Gaming

Programming

Irregular grid using 1 CMS collection