Skip to main content
adicionou 2823 caracteres ao conteúdo
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261

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>


Demonstração

ul {
  position:relative;
  margin:0;
  pádding:0;
}

li {
  display:block;
  float:left;
  list-style-type: none;
  margin:0;
  padding:0;
  background-color:#999;
  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;
}
<ul>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
</ul>

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;
  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>
adicionou 327 caracteres ao conteúdo
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261

Se o numeroSua solução é boa, mas apenas para um número ímpar de colunas:

box_parceiro:nth-child(odd)

Se o número for fixoímpar, essavai 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 bemrazoavelmente simples para colunas pares. Demonstrei 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élulas8 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 ...
}


Demonstração

ul {
  position:relative;
  margin:0;
  pádding:0;
}

li {
  display:block;
  float:left;
  list-style-type: none;
  margin:0;
  padding:0;
  background-color:#999;
  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;
}
<ul>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
</ul>

Se o numero de colunas for fixo, essa é uma solução bem simples. 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, 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 ...
}


Demonstração

ul {
  position:relative;
  margin:0;
  pádding:0;
}

li {
  display:block;
  float:left;
  list-style-type: none;
  margin:0;
  padding:0;
  background-color:#999;
  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;
}
<ul>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
</ul>

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


Demonstração

ul {
  position:relative;
  margin:0;
  pádding:0;
}

li {
  display:block;
  float:left;
  list-style-type: none;
  margin:0;
  padding:0;
  background-color:#999;
  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;
}
<ul>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
</ul>

adicionou 136 caracteres ao conteúdo
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261

Se o numero de colunas for fixo, essa é uma solução bem simples. 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, 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. Veja o resultado:

li:nth-child(8n+2),
li:nth-child(8n+4),
li:nth-child(8n+5),
li:nth-child(8n+7) {
  ... cor ...
}


Demonstração

ul {
  position:relative;
  margin:0;
  pádding:0;
}

li {
  display:block;
  float:left;
  list-style-type: none;
  margin:0;
  padding:0;
  background-color:#999;
  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;
}
<ul>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
</ul>

Se o numero de colunas for fixo, essa é uma solução bem simples. 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, 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. Veja o resultado:

ul {
  position:relative;
  margin:0;
  pádding:0;
}

li {
  display:block;
  float:left;
  list-style-type: none;
  margin:0;
  padding:0;
  background-color:#999;
  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;
}
<ul>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
</ul>

Se o numero de colunas for fixo, essa é uma solução bem simples. 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, 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 ...
}


Demonstração

ul {
  position:relative;
  margin:0;
  pádding:0;
}

li {
  display:block;
  float:left;
  list-style-type: none;
  margin:0;
  padding:0;
  background-color:#999;
  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;
}
<ul>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
  <li>Teste</li>
</ul>

Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261
Carregando