I'm having trouble achieving this look. Please help :S

Hi all!

I’m having trouble figuring out the product list area :dizzy_face:

I want to move up the second and the following link blocks on the first column

I tried to use grid and flex box, but they all reserve the space on “New donuts” line.

Can someone please help me on this?

Here is my site Read-Only: Site Link


Hi Jeffrey,
The simplest way to archive that layout is to use 2 columns and just add text to one.

Let me know if that helped :slight_smile:

I’ve added you a read-only link.


1 Like

Hi Jeffrey, (& Julian),

I think Julian’s solution should work perfectly. While he was writing his answer I was busy using the Grid Area’s to achieve the same result. To give you a broader perspective I thought I would share it anyway:).

So you can achieve the desired result by using Grid Areas by combining one or more grid cells. See the screenshot attached.

Good luck with your project! Hope it helps.


1 Like

Hi Julian,

Thank you!!! :heart_eyes:

I thought there will be an easy way to do it without manually separating two cols, so I didn’t end up trying this at the first place.

Thanks for taking your time creating this demonstration for me. I’ve successfully recreated your design.

Highly appreciate it!


Hi Jesse,

Thanks so much for providing your solution :heart:

I’ve tried this method but ended up with lots of space in between the first few roles as shown below.

By any chance, we can reduce that space underneath the title, and Area A & C?