Need help in grid

1

Hello! I’m working with CSS Grid and trying to achieve this layout:

IMG_1758
IMG_17581598×1064 44.9 KB

I’ve almost got it, but I’m facing one issue. For the first column on the left side, Box 1 should end in the middle of Box 4, and Box 6 should start in the middle of Box 4. I’ve tried to make this happen, but it’s not working. Can you help me figure out how to achieve this layout?

This is my code link

https://codepen.io/Masooma-Qasim/pen/ByBmdWy?editors=0100

2

you need 4 rows to achieve that
the boxes in the left column would both span two rows, then the boxes in the central column would span 1, then 2 then 1 rows, and in the last column, first 3 rows second 1 row

the relative size you achieve by changing the height of the rows

1 Like