Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Achieving this grid layout in css

Status
Not open for further replies.

tyutghf

Technical User
Apr 12, 2008
258
GB
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
 
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]
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top