Solução CSS
Solução JavaScript
Caso realmente a quantidade de elementos possa variar quando o usuário redimensionar a janela, uma possível solução seria usar um script.
Escrevi um que alterna as classes:
function quadriculado( id, cName ) {
var c = document.getElementById( id );
var toggle = 0;
var line = 0;
var lastY
for( var i = 0; i < c.children.length; i++ ) {
var y = c.children[i].getBoundingClientRect().top;
var classes = c.children[i].className.replace( cName, '' );
if( y !== lastY ) { lastY = y; line++; toggle = 0 } else { toggle = 1 - toggle };
c.children[i].className = classes + ( toggle == line % 2 ? '' : ' ' + cName );
}
}
O único cuidado é você chamar o script no evento de resize também:
quadriculado( 'elemento', 'classe' );
window.addEventListener('resize',function(){quadriculado( 'elemento', 'classe' )} );
Outro ponto a se observar é que, para simplificar, usei uma substituição básica de string, então convém usar um nome de classe que não esteja contido em outras classes dos elementos internos.
Demonstração das duas soluções:
Aqui, uma demonstração da solução CSS, adequada para colunas fixas:
ul {
position:relative;
margin:0;
páddingpadding:0;
}
li {
width:25%;
height:60px;
display:block;
float:left;
list-style-type: none;
margin:0;
padding:0;
background-color:#999;#eee;
box-sizing: border-box;
width:25%;
}
li:nth-child(8n+2),
li:nth-child(8n+4),
li:nth-child(8n+5),
li:nth-child(8n+7) {
background-color:#444;#ccc;
}
<ul>
<li>Teste<<li>1</li>
<li>Teste<<li>2</li>
<li>Teste<<li>3</li>
<li>Teste<<li>4</li>
<li>Teste<<li>5</li>
<li>Teste<<li>6</li>
<li>Teste<<li>7</li>
<li>Teste<<li>8</li>
<li>Teste<<li>9</li>
<li>Teste<<li>10</li>
</ul>
E aqui, a demonstração da solução JS, adequada para número de colunas variável durante o uso.
Para testar, experimente usar o modo de "página toda" e mudar o tamanho da janela. Se preferir, pode ver diretamente no CodePen.
function quadriculado( id, cName ) {
var c = document.getElementById( id );
var toggle = 0;
var line = 0;
var lastY
for( var i = 0; i < c.children.length; i++ ) {
var y = c.children[i].getBoundingClientRect().top;
var classes = c.children[i].className.replace( cName, '' );
if( y !== lastY ) { lastY = y; line++; toggle = 0 } else { toggle = 1 - toggle };
c.children[i].className = classes + ( toggle == line % 2 ? '' : ' ' + cName );
}
}
quadriculado( 'q', 'x-odd' );
window.addEventListener('resize',function(){quadriculado( 'q', 'x-odd' )} );
.card {
display:block;
width:200px;
height:60px;
float:left;
list-style-type:none;
background-color:#eee;
}
.x-odd {
background-color:#ddd;
}
ul {
margin:0;
padding:0;
}
<ul id="q">
<li>Teste< <li class="card">1</li>
<li>Teste< <li class="card">2</li>
<li>Teste< <li class="card">3</li>
<li>Teste< <li class="card">4</li>
<li>Teste< <li class="card">5</li>
<li>Teste< <li class="card">6</li>
<li>Teste< <li class="card">7</li>
<li>Teste< <li class="card">8</li>
<li class="card">9</li>
<li class="card">0</li>
</ul>