Achieving this grid layout in css

[tyutghf]

I am trying to achieve this layout, but struggling

https://ibb.co/yWPg8SR

I split in to two columns initially, the left column having two divs one on top of the other. The right having two rows, with divs within them.

Here's my html

[pre]<div class='home-grid'>

<div class='home-grid-left'>

<div class='home-grid-left-top' style='background: url(images/spacer.png)'><a href=''><span>SALE</span></a></div>
<div class='home-grid-left-bottom' style='background: url(images/spacer.png)'><a href=''></a></div>

</div>

<div class='home-grid-right'>

<div class='home-grid-right-top'>

<div class='home-grid-right-top-left' style='background: url(images/spacer.png)'><a href=''></a></div>
<div class='home-grid-right-top-right' style='background: url(images/spacer.png)'><a href=''></a></div>

</div>

<div class='home-grid-right-bottom'>

<div class='home-grid-right-bottom-left' style='background: url(images/spacer.png)'><a href=''></a></div>
<div class='home-grid-right-bottom-right' style='background: url(images/spacer.png)'><a href=''></a></div>

</div>

</div>

</div>[/pre]

and here is my css

[pre].home-grid {position: relative; display: flex; height: 450px; margin: 50px 0}
.home-grid div {position: relative;}
.home-grid div a {position: absolute; top: 0; right: 0; bottom: 0; left: 0}
.home-grid-left {position: relative; flex:1; margin-right: 10px; flex-direction: column; background-color: azure}
.home-grid-left-top {margin-bottom: 10px; min-height: 200px}
.home-grid-left-bottom {flex: 2; flex:auto}

.home-grid-right {position: relative; flex: 3; background-color: aliceblue}[/pre]

I am stuck on the home-grid-left-bottom as it isn't showing. The spacer.png is just an image placeholder, the final version will have images on each div.

Can anyone help?

Thanks

 

[tyutghf]

Sorted it, I just needed to take a break and come back afresh. If anyone wants a similar layout

[pre].home-grid {position: relative; display: flex; height: 450px; margin: 50px 0}
.home-grid div {position: relative;}
.home-grid div a {position: absolute; top: 0; right: 0; bottom: 0; left: 0}
.home-grid-left {position: relative; flex:1; display: flex; margin-right: 10px; flex-direction: column; }
.home-grid-left-top {margin-bottom: 10px; min-height: 200px}
.home-grid-left-bottom {flex: 2; flex:auto}

.home-grid-right {position: relative; flex: 3; display: flex; flex-direction: column; }
.home-grid-right-top {flex: 1; display: flex; flex-direction: row; min-height: 260px; margin-bottom: 10px;}
.home-grid-right-top-left {flex: 2; margin-right: 10px;}
.home-grid-right-top-right {flex: 3}
.home-grid-right-bottom {flex: 1; display: flex; flex-direction: row}
.home-grid-right-bottom-left {flex: 3; margin-right: 10px;}
.home-grid-right-bottom-right {flex: 2}[/pre]