Responsive CSS grid with pattern - css

Question

I'm trying to create a responsive grid with a defined pattern, like this:
right now i have working part of it here:
grid demo
But I can't put all the columns in the right place, the big box on the right side never has 2 boxes on its left.
This is the code for the container:
<div class="container">
<div class="box">
<p>box1 BIG</p>
</div>
<div class="box">
<p>box2</p>
</div>
<div class="box">
<p>box3</p>
</div>
<div class="box">
<p>box4</p>
</div>
<div class="box">
<p>box5</p>
</div>
<div class="box">
<p>box6 BIG</p>
</div>
<div class="box">
<p>box1 BIG</p>
</div>
<div class="box">
<p>box2</p>
</div>
<div class="box">
<p>box3</p>
</div>
<div class="box">
<p>box4</p>
</div>
<div class="box">
<p>box5</p>
</div>
<div class="box">
<p>box6 BIG</p>
</div>
</div>
and this is the css:
.container {
max-width: 1000px;
margin: 0 auto;
background-color: #5B83AD;
}
.box {
background-color: #5B83AD;
width: 50%;
float: left;
height: 200px;
}
.box:nth-child(6n+1){
background-color: #444444;
height: 400px;
}
.box:nth-child(6n){
background-color: #992277;
height: 400px;
}
#media screen and (max-width: 620px) {
.box {
clear: both;
width: 100%;
}
}
#media screen and (min-width: 621px) {
.box {
clear: none;
width: 50%;
}
}
I want the boxes to keep always the same layout:
1 big - 2 half height
2 half height - 1 big
...
And i need it to work on IE8 too
Is there a way to achieve this layout(it has to be responsive and if i remove a box the layout has to re-adapt)?

Answer 1

They are out of order, but maybe you'll accept it I'm not sure. Box 4 is the big one not 6 which makes it a little strange but the design still follows the pattern.
Sorry if this isn't what you wanted.
http://jsfiddle.net/UN2DH/3/
The only major change is this from :nth-child(6n) to nth-child(6n+4) and the added float right to that rule.
.box:nth-child(6n+4){
background-color: #992277;
height: 400px;
float: right;
}
HTML
<div class="container">
<div class="box">
<p>box1 BIG</p>
</div>
<div class="box">
<p>box2</p>
</div>
<div class="box">
<p>box3</p>
</div>
<div class="box">
<p>box4 BIG</p>
</div>
<div class="box">
<p>box5</p>
</div>
<div class="box">
<p>box6</p>
</div>
<div class="box">
<p>box1 BIG</p>
</div>
<div class="box">
<p>box2</p>
</div>
<div class="box">
<p>box3</p>
</div>
<div class="box">
<p>box4 BIG</p>
</div>
<div class="box">
<p>box5</p>
</div>
<div class="box">
<p>box6</p>
</div>
</div>
CSS
.container {
max-width: 1000px;
margin: 0 auto;
background-color: #5B83AD;
}
.box {
background-color: #5B83AD;
width: 50%;
float: left;
height: 200px;
}
.box:nth-child(6n+1){
background-color: #444444;
height: 400px;
}
.box:nth-child(6n+4){
background-color: #992277;
height: 400px;
float: right;
}
#media screen and (max-width: 620px) {
.box {
clear: both;
width: 100%;
}
}
#media screen and (min-width: 621px) {
.box {
clear: none;
width: 50%;
}
}
EDIT:
I forget you don't really need the float:left on the .box:nth-child(6n+5), .box:nth-child(6n+6) rule so I removed it above. (so just a heads up if you used that code. It's not necessary because the .box rule already had a float: left) I also updated the jsfiddle above. Heres the old JSfiddle previously its CSS, and the CSS above, had this rule.
.box:nth-child(6n+5), .box:nth-child(6n+6){
float: left;
}
EDIT:
Okay so I just had to have a little fun. :)
I added the following to a new JSFiddle. To make it look like your picture. I wasn't sure how many lines of text you were going to have, but the vertical centering will only work if it's one line of text so keep that in mind. If you want it centered otherwise you'll have to use some other method, like this, and if you know the height and the width of the div or image you want to center here is a great method that will work. Just make sure your parent div is position: relative., if you're using the code from that 'great method', or else this will center this in your whole browser window or the closest element with positioning of fixed, absolute, or relative to it. (more about positioning here.)
I added most of the styles at the bottom of the style sheet just to seperate the old from the new so you could tell what's different, but first I'll show you what styles I added to the existing code. I changed two background colors for .box:nth-child(6n+1) I added background-color: #676767; and for .box:nth-child(6n+4) I added background-color: #CDCDCD;.
Here are the changes I made at the bottom of the stylesheet. (if you decide to go with this you can merge the style rules together.)
.box {
text-align: center;
box-sizing: border-box;
line-height: 200px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #fff;
}
.box:nth-child(3n+1) {
line-height: 400px;
}
.box p {
margin: 0;
}
.box:nth-child(3n+2) {
background-color: #7ACDC8;
}
.box:nth-child(3n+3) {
background-color: #3CB878;
}
Yeah, I know now my answer is just ridiculously long...
Anyways, hope you like it. :) If not that's okay too.

Answer 2

Maybe this is what you want. Demo.
.box:nth-child(1),.box:nth-child(7n){
background-color: red;
height:200px;
}
.box:nth-child(2n){
background-color: green;
height:100px;
}
.box:nth-child(3n){
background-color: yellow;
height:100px;
}
.box:nth-child(5),.box:nth-child(11){
background-color:grey;
height:200px;
float:right;
}
You just need to play around with css3 :nth-child() selector.