Help creating non-standard card layout

Hello! I am newer to webflow and I’m attempting to design a section using a non-standard card layout. See attached image.

What is the best way to go about this? Is there a way to manipulate quick stack to accomplish this? Do I need to layout multiple containers or grids on top of each other? I’d love any advice!


Where are you stuck?

If this is the desktop layout, I see a grid of 3 cols and 4 rows, with some colspans and rowspans for your elements.

Not sure how you intend for it to respond on smaller displays, but you have lots of options. Investigate grids and areas, that is one good direction here.

Hey! Thanks. Yes, this would be desktop. Tab and mobile will be much simpler, so not worried about them.

I think the main areas I’m stuck are:

  1. Middle column two small square next to each other: Would this just be two divs within one grid cell?
  2. Bottom right overlapp containers. Can I expand a div to flow outside of a cell and into another, aka the one grey cell needs to float under the bottom right black cell.

I’m also just generally trying to think about the most efficient way to set it up. Is it just a customized grid of 3 rows 3 cols?

Thanks so much for the help.

Ok I figured out the general setup. What I need help on is created the overlap of the bottom right two columns so they overlap like in the original image in this post.

You cannot have more than one item in a cell, but a cell can span multiple cols or rows.

Think of it as a 4 x 3 grid.
Each of the five small items are 1 x 1 in that grid
The left green item is 1 x 3, i.e. rowspan 3
The top gray item is 2 x 2