Hey Professionals!

I want to create a masonry grid layout like in the scheme attached below. I have tried possibly every css-grid option I could find, from calculated row and column heights to fixed aspect ratio cards (with a pseudo element and padding-bottom). I get to align everything with two card sizes, but not with the 3.

Either one of the 3 gets a weird aspect ratio, or there are white left-out spaces in the grid which does not look nice.

The basic proportion of the “main” card should be: 4:5
The small one: 4:(2,5-half the gap)
The big one: 8+gap:5

I am working with react, and first thought about using components like the react virtualized masonry component, but I could not find an option with layouts where cards span columns.

I am beyond thankful for any suggestion how to make this work. Thanks!!

3 different card sizes.