Alternating grid colours - html

Question

I'm wanting to achieve a two column grid layout that has grid blocks with alternating colours. However, achieving this with a simple nth-child(odd) or nth-child(even)won't do the trick.
I'm pretty sure what I want can be achieved using a touch of nth-child trickery, rather than a JS solution, but not quite sure how.
Here's a pen of what I'm wanting to achieve: http://codepen.io/abbasinho/pen/Gbnze
Here's the HTML as it is in the pen, i'd like to avoid the additional class to add the colors:
<div class="grid-holder">
<div class="grid red"></div>
<div class="grid blue"></div>
<div class="grid blue"></div>
<div class="grid red"></div>
<div class="grid red"></div>
<div class="grid blue"></div>
<div class="grid blue"></div>
<div class="grid red"></div>
</div>
SASS:
.grid-holder {
width: 50%;
margin: 0 auto;
overflow: hidden;
}
.grid {
width: 50%;
height: 200px;
float: left;
&.red {
background: red;
}
&.blue {
background: blue;
}
}

Answer 1

As you repeat a pattern every 4 elements (red/blue/blue/red), you can achieve this with :nth-child(4n+x) variations :
<div class="grid-holder">
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
</div>
.grid-holder {
width: 50%;
margin: 0 auto;
overflow: hidden;
}
.grid {
width: 50%;
height: 200px;
float: left;
background: red;
// The 2nd and the 3rd element in our pattern will be blue
&:nth-child(4n+2),
&:nth-child(4n+3) {
background: blue;
}
}