Unable to set up 2 column grid with various heights in rows

[karimdhammani]

Hey There,

So I am unable to make a grid layout with just two columns and multiple rows. Each column has cards with various heights. I.e., The rows in each column have multiple heights and the grid gets stacked on the basis of the bigger height row leaving unwanted space between two cards in that particular column.

Here is the read only link to my project: https://preview.webflow.com/preview/karims-supercool-project-140e95?utm_medium=preview_link&utm_source=designer&utm_content=karims-supercool-project-140e95&preview=59fd529213c7d7f99895c7ef4fea8c88&mode=preview

This is what I wanna achieve:

This is where I am struggling:

Somebody please help me with the solution. This bug has been bugging me since the last two days. I am sure it is gonna be something very simple and easy to do.

[JanneWassberg]

Take a look here it might help you CSS grid in Webflow | Webflow University

[karimdhammani]

@JanneWassberg Yes I did check the tutorials but still have not been able to figure out on my own that’s why I am here.

My issue is that in the Row 1 Column 2 cell, the div is smaller than the one in column 1. But the row is not responsive to the rows below and is causing the space between that cell and the one below it in column 2.

Its the space I have not been able to figure out. Again, I have checkd the tutorials in the webflow university so @JanneWassberg Can you please help me ?

[JanneWassberg]

@karimdhammani i dont know if this can help ypu

https://preview.webflow.com/preview/grid-sample-different-size?utm_medium=preview_link&utm_source=designer&utm_content=grid-sample-different-size&preview=3c953c9bf184c67232af867c444e58bb&mode=preview

[Carlos_Ruiz_Del_Vizo]

Hi @karimdhammani, please share the correct link of the preview to help you. The one you share is took me to a 404.

Let me know!