I am looking to create a two-column grid layout with alternating colors for the grid blocks. However, using just nth-child(odd) or nth-child(even) won't give me the desired outcome.
I believe I can achieve this by utilizing some clever nth-child techniques instead of resorting to a JavaScript solution, but I am not entirely sure how to do it.
Check out this example of what I'm aiming for: http://codepen.io/abbasinho/pen/Gbnze
Here is the HTML code from the example above—I would prefer to not use additional classes to designate 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>
This is the SASS code used in the example:
.grid-holder {
width: 50%;
margin: 0 auto;
overflow: hidden;
}
.grid {
width: 50%;
height: 200px;
float: left;
&.red {
background: red;
}
&.blue {
background: blue;
}
}