Achieving this grid layout in css
Achieving this grid layout in css
(OP)
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
and here is my css
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
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
<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>
and here is my css
.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}
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
RE: Achieving this grid layout in css