I am trying to achieve this layout, but struggling
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
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