Streaming live at 10am (PST)

Creating an offset grid with Flexbox

Hey guys,

I’m running into a bit of a problem here. I’m trying to recreate this grid from my design using Flexbox but I’m having lots of trouble figuring out how to execute this grid. It’s a 2 column in which the right column is offset slightly.

Here’s the image of the grid design:
51%20AM

Is it possible/viable to do this with Flexbox or should I be approaching it differently?

I’ve created a page titled “Grid” with two thumbnails if anyone’s trying to take a stab at it.

Here is my site Read-Only: [https://preview.webflow.com/preview/death-of-classical?preview=c0f43a45c2b8da7b50493cef56ec0544]

Cheers everyone!
Jereme


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

Here that you need:
__https://drive.google.com/open?id=19-VluU6eUpZtoSu44Gu_5IMkt_34JtPO

1 Like

Got damn dude you’re amazing! Thank you so much. I appreciate it so much!

Glad to help you :v:️:blush:

How would you accomplish this if your cards were collection items?

With Custom CSS code using this selector: https://www.w3schools.com/cssref/sel_nth-child.asp

1 Like

That worked like a charm. Thanks!

For anyone else trying to get this to work, I inspected the published code and Webflow names the collection items “.w-dyn-item” So to get my right column to push down I used:

.w-dyn-item:nth-child(even) {
margin-top: 100px;
}

I don’t know enough to change this for smaller break points. Luckily for me my mobile view goes to a 1 column grid so it doesn’t really matter.

1 Like

Can you clarify? I can’t seem to find where i need to put the code.

Do i need to set an ID van the collection list item? And then past the code in de BODY?

https://university.webflow.com/article/how-to-add-custom-head-and-body-code-to-a-webflow-site

There is a link about custom code. You can access it from the projects settings or the page settings when you are in the designer. You could target a custom div class if all your grid items were wrapped in the some container but I was able to target them with:

.w-dyn-item:nth-child(even) {
margin-top: 100px;
}

the .w-dyn-item is a class that webflow automatically makes when you create a collection item so I targeted it that way.

Hey Lorentracy,

It doesn’t work on my project; wanna check it out? I pasted the custom code in the project settings (didn’t work), pasted it in the HEAD and Body Tag on the portfolio item page (didn’t work either).

https://preview.webflow.com/preview/animation-agency?utm_medium=preview_link&utm_source=designer&utm_content=animation-agency&preview=fd2f5efd400aac023bb0460a43b37d73&pageId=5e8f333da3ddfb0fa32a5037&itemId=5ebfecbd82fa9e5d3c4d24bc&mode=preview

I checked out your link an it looks like they are offset. Are these the items you are talking about?

@juiok98 If you want to post your share link and some more details of issues I could see if I could help out.

It works now, thank you! :slight_smile:

Awesome, this worked for me!

To make it responsive, I used media queries to define breakpoints. Webflow has breakpoints already set, so it’s just a matter of choosing the correct one.

For instance:

@media (min-width: 767px) {
.w-dyn-item:nth-child(even) {margin-top: 100px;}
}

So those CSS rules will only apply when the viewport has a width of more than 767px.

1 Like