Две колонок с очередными цветами с CSS

Question

Я пытаюсь создать сетку 2 колонки с альтернативными цветами (первую ячейку красным цветом, второй желтым, третьи желтым, четвертые красным и так далее)

Используя- cols. У меня нет проблем, но с этим макетом я схожу с ума = _ =

Может кто-нибудь мне помочь?

Благодаря

BRK

Answer 1

Вы можете использовать этот селектор :nth-child():

/*Every 2 rows from 0 (even) - Every 2 cells from 0 (even)*/ 
.row:nth-child(2n+0) div:nth-child(2n+0) { 
    background: #ff0000; 
} 

/*Every 2 rows from 0 (even) - Every 2 cells from 1 (odd)*/ 
.row:nth-child(2n+0) div:nth-child(2n+1) { 
    background: #ffff00; 
} 

/*Every 2 rows from 1 (odd) - Every 2 cells from 0 (even)*/ 
.row:nth-child(2n+1) div:nth-child(2n+0) { 
    background: #ffff00; 
} 

/*Every 2 rows from 1 (odd) - Every 2 cells from 1 (odd)*/ 
.row:nth-child(2n+1) div:nth-child(2n+1) { 
    background: #ff0000; 
} 

Demo

Что можно упростить следующим образом:

.row:nth-child(even) div:nth-child(even) { 
    background: #ff0000; 
} 
.row:nth-child(even) div:nth-child(odd) { 
    background: #ffff00; 
} 
.row:nth-child(odd) div:nth-child(even) { 
    background: #ffff00; 
} 
.row:nth-child(odd) div:nth-child(odd) { 
    background: #ff0000; 
} 

Demo

---

Documentation