CSS responsive nested grid height

Question

I am currently teaching myself how to setup a responsive grid layout that will automatic adjust on the device size. So far so good, but I am having an issue with the the height of some of the boxes not adjusting. See here for the code http://jsfiddle.net/shuka/tbe32q3h/

html

<body>
<div id="section2">
<div class="container grid2">
    <article class="col half">MAP</article>
    <article class="col half" style="background-color:#069;">
        <div class="grid2">
            <article class="col quater">BOX 1</article>
            <article class="col quater">BOX 2</article>
        </div>
        <div class="grid2">
            <article class="col quater">BOX 3</article>
            <article class="col quater">BOX 4</article>
        </div>
    </article>
    <br/>
</div>

CSS

body {
    margin: 0;
    padding: 0;
 }
#section1 br,#section2 br,#section3 br, #topbar br {
clear: both;
}
.container {
margin: auto;
max-width: 1400px;
overflow:hidden;
}

.col { 
background: #eee;
float: left;
margin-left: 1.4%;
margin-bottom: 20px;
}
.grid2 .col {
width: 49.3%;
}
.grid2 .half {

/*width: 48.4%;*/
height:49.3vw;
/*max-width:678px;*/
max-height:690px;
/*float:left;*/
position:relative;
}
.grid2 .quater {
margin-left: 2.1%;
margin-bottom: 2.1%;
width: 48.95%;
height:48.95vw;
/*max-width:317px;*/
max-height:338px;
/*  float:left;*/
position:relative;
}
.grid4 .col:nth-of-type(4n+1), .grid3 .col:nth-of-type(3n+1), .grid2 .col:nth-of-type(2n+1) {
margin-left: 0;
clear: left;
}

As you can see when you resize the big boxes change, however the issue is with the 4 smaller boxes, the width changes but the height stay the same. I would like the four boxes to keep as square but get small when the screen is resized, if anyone can spot something I have missed it be greatly appreciated.

Cheers Shuka

have a look at [this jquery](http://stackoverflow.com/a/17211531/3436942) — jbutler483, Nov 10 '14 at 14:56
Was that what you needed? Let me know if I understood correctly what you were going for. — Casey Rule, Nov 11 '14 at 19:02
@CaseyRule that is great that will do it, thanks, I have had to change the structure slightly so it can adjust on small screens, so each box is 100% the width. — shuka, Nov 11 '14 at 20:01

score 2 · Accepted Answer · answered Nov 10 '14 at 17:11

This is a tricky layout to pull off, but I did a little playing around and I think I have something that will work for you:

http://jsfiddle.net/CaseyRule/h0drc99g/

I decided to treat the max-width scenario with hard-coded numbers, like this:

@media (min-width: 900px) { /* max-width of container */

    .half { 
        height: 450px; /* max-width * 50% */
    }

    .half.col1 {    
        width: 432px; /* max-width * 48% */
    }
    .half.col2 {    
        width: 450px; /* max-width * 50% */
    }
    .quarter {
        width: 216px; /* max-width * 24% */
        height: 216px; /* max-width * 24% */
    }

    .half.col1, .quarter.col1 {
        margin-right: 18px; /* max-width * 2% */
    }

    .row1 .quarter {
        margin-bottom: 18px; /* max-width * 2% */
    }
}

I did this with a max-width of 900px, just so you could see how it works more easily within the jsfiddle screen, but it is easy to change this to 1400px as you had it originally. Just change the max-width of the container, and calculate the numbers within the media query as indicated in the comments. Alternatively, you could automate all of these calculations with a pre-processor like LESS, which I would strongly encourage.

CSS responsive nested grid height

1 Answers1