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:

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: []

Cheers everyone!

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

Here that you need:

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:

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?

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).

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