Foundation-sites: Grid with overlapping cell in Flexbox

[ghost]

I am using the flexbox grid and I want to create the following structure:

I haven't found any documentation as to how to stretch that one cell over two heights so I tried to have one row with left and right cells. The left one holds 4 images via grid and the right one holds a row with two cells - first one holds the stretched image and the second one holds the last two images.

I was able to achieve the look but the horizontal spacing is off and does not align for all images, which makes sense since the cells are not in one single row.

Is it possible to somehow achieve this grid "properly"?

[DanielRuf]

In general these are 4 columns, 3 x 6 / 6 y-grid and 1 x 12 y-grid.

[lkraav]

@ivanjaros did you come up with a solution on your own, or?

[ghost]

@lkraav it is not possible..maybe the xy grid can do it, im not using it so dont know really.

[ncoden]

@ivanjaros Daniel described how to do it with the XY Grid:

|     |     |     |     |
|     |     |     |     |
|  6  |  6  |     |  6  |
|     |     |     |     |
| --- | --- |  12 | --- |
|     |     |     |     |
|  6  |  6  |     |  6  |
|     |     |     |     |
|     |     |     |     |