Чередование цветов сетки

Question

Я хочу достичь двухстрочной сетки, которая имеет блоки сетки с чередующимися цветами. Однако достижение этого с помощью простого nth-child (нечетного) или nth-child (even) не будет делать трюк.

Я уверен, что я хочу, чтобы добиться успеха, используя прикосновение обмана nth-child, а не решение JS, но не совсем уверенно.

Вот перо из того, что я хотел достичь: http://codepen.io/abbasinho/pen/Gbnze

Вот HTML, как в загоне, я хотел бы, чтобы избежать дополнительного класса, чтобы добавить цвета:

<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

Как вы повторить рисунок каждые 4 элементов (красный/синий/синий/красный), вы можете достичь этого с :nth-child(4n+x) вариациями:

<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; 
    } 
}