Creating an offset grid with Flexbox

Design help General
1

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
51%20AM598×822 282 KB

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: [Webflow - Death of Classical]

Cheers everyone!
Jereme

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

2

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

1 Like
3

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

4

Glad to help you :v::blush:

5

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

6

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

1 Like
9

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
10

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?

11

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.

12

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

13

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

Screen Shot 2020-05-20 at 3.08.44 PM
Screen Shot 2020-05-20 at 3.08.44 PM2598×1620 415 KB

15

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

16

It works now, thank you! :slight_smile:

17

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
18

Hey, I’m trying to create an offset grid on my site. I tried to follow your drive link but it’s going to a 404. Any chance you could share it again/make it public? Thank you!

19

I can’t, It’s 2018…:grin: But try to use what write @Ahmed-Mky :point_up: It’s works :ok_hand: