6

Olá, gostaria de saber se é possível fazer uma lista quadriculada, como a da imagem abaixo, apenas com css (favor desconsiderar linhas azuis):

eu achei a função nth-child do css, mas consegui apenas fazer isso:

.box_parceiro:nth-child(odd) { background-color: $cinza_noticia_home; }

<ul>
    <li class="col-md-3 col-sm-6 col-xs-12 box_parceiro" ng-repeat="i in vm.repeat(12) track by $index" >
         <h1>ARLETE MARIA SIMON</h1>
         <br>
         <p>
             Peritiba/SC<br>
             (49) 3453-1335<br>
             [email protected]
         </p>
     </li>
 </ul>

1
  • 1
    Posta o código que vc já fez Commented 30/03/2016 às 12:52

2 Respostas 2

7

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>

2
  • Olá, sua solução deu certo. O site vai ser responsivo sim e a quantidade de <li> seriam variáveis, pois vai ser cadastrável. Com o seu exemplo vai ficar perfeito. Obrigado pela ajuda. Commented 1/04/2016 às 10:49
  • O importante é o número de colunas, não de li. Se o número de colunas for fixo, a melhor solução é a CSS (não importa quantos li). Se o número de colunas for variar (pode aparecer 5 em uma tela e 8 em outra, por exemplo), aí tem que ser o JS
    – Largato
    Commented 1/04/2016 às 12:39
0
.box_parceiro { background-color: $cor_padrao; }
.box_parceiro:nth-child(2n+1) { background-color: $cinza_noticia_home; }
3
  • Olá, eu fiz o teste e usando da forma que você me passou ele não faz nada de diferente, mas usando apenas (2n) ele apenas substitui os box brancos pela cor cinza, sem criar o efeito quadriculado. Commented 31/03/2016 às 11:32
  • Poste seu código atual, alguma coisa está atrapalhando o efeito. Commented 31/03/2016 às 11:34
  • Inseri abaixo do css o código html. A <ul> está apenas com float: left e width: 100% no css e antes da <ul> tem um <div> com loat: left, width: 100% e padding top e bottom apenas. Commented 31/03/2016 às 18:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .