Solução CSS
Sua solução é boa, mas apenas para um número ímpar de colunas:
box_parceiro:nth-child(odd)
Se o número for ímpar, vai ficar um quadriculado perfeito, pois a última da primeira linha vai necessariamente diferente da primeira da linha seguinte.
Só que com números pares, isto não funciona.
De qualquer forma, tem é uma solução razoavelmente simples para colunas pares. Demonstrei com quatro colunas, mas entendendo a lógica fica fácil.
Se são quatro colunas alternadas, a sequência de cores é essa:
A B A B
B A B A
repetindo em seguida. Ou seja, temos um ciclo de 8 células que se repete. Neste ciclo, não precisamos especificar a cor de todas as células, basta colocar uma cor padrão, e mudar outras 4.
Se nosso ciclo é A B A B B A B A
, temos a cor B
nas posições 2, 4, 5 e 7. Neste caso, o nth-child(Nn+I)
pode nos ajudar. Basta trocarmos o N
pelo tamanho do ciclo, e o I
pela posição:
li:nth-child(8n+2),
li:nth-child(8n+4),
li:nth-child(8n+5),
li:nth-child(8n+7) {
... cor ...
}
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;
padding:0;
}
li {
width:25%;
height:60px;
display:block;
float:left;
list-style-type: none;
margin:0;
padding:0;
background-color:#eee;
box-sizing: border-box;
}
li:nth-child(8n+2),
li:nth-child(8n+4),
li:nth-child(8n+5),
li:nth-child(8n+7) {
background-color:#ccc;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<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 class="card">1</li>
<li class="card">2</li>
<li class="card">3</li>
<li class="card">4</li>
<li class="card">5</li>
<li class="card">6</li>
<li class="card">7</li>
<li class="card">8</li>
<li class="card">9</li>
<li class="card">0</li>
</ul>