Flexbox Masonry Design Advice

Design help General
1

Hello,

I am having a difficult time working with flexbox at the moment. I am in the process of updating my portfolio website and I want my projects listed on the homepage to have a masonry-like design. The image below is my prototype of what I want it to look like overall.

43%20PM
43%20PM1002×846 449 KB

The problem is that I cannot get the book image (large image to the right) to fill the gap beneath the two smaller images above it. Here is my share-link/preview: [https://preview.webflow.com/preview/kaylees-first-project-ee2f39?utm_source=kaylees-first-project-ee2f39&preview=eee8ef33b5a2dfd123a44816b914e572]
Note: some of the images are different from what you see on the prototype because I’m trying to figure out this structure problem at the moment.

I’ve followed this tutorial online and they keep using the Flex Child Settings that I do not see anywhere in the Style section on my own webflow program. I am using the most up-to-date Safari. So I cannot split a child into two sections. Here’s the tutorial that I was trying to follow for further explanation: https://www.youtube.com/watch?v=sQGgDWx0WXc <—It starts at the 9:40 mark.

Any help will be greatly appreciated.

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

2

Oh, do I have a treat for you… Build CSS grid layouts visually | Webflow

Grid is the perfect tool to use to design it like this… there are a million videos on how to use it.

2 Likes
3

Thank you for the quick response! I have switched over with using the grid and so far it has worked out pretty well. However, I do have a new problem, if you would mind taking a look. After I arranged my images, I want to set a Link Block to each project. The problem is the red line always extends past the images and makes that entire section clickable, which I don’t want since there will be a project beneath that top project. I tried to move the Link Block section up but it keeps dropping down. I know that it’s aligning with the grid. Is there a way around this?

Thanks again for any help.

01%20AM
01%20AM2880×1800 905 KB

4

Hey,

Can you share the link to this project? I check out the above preview link but I could find the Grid anywhere.

Connor