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

Segue uma solução CSS3 que leva em conta vários fatores:

  • Largura variável: você pode mexer no tamanho da UL, que as células acompanharão;

  • Segurança ao definir os 50% para não "estourar" o espaço disponível por inconsistências do browser;

  • Inclui a solução para o "quadriculado" das cores em CSS (mesmo que seja só pra ilustrar, é legal saber como se faz);

html, body, ul {      /* aqui o que importa é o UL, o resto é pra estética do demo.          */
  position:relative;  /* reset do position, não relacionado ao demo, mas bom pra uso geral.  */
  margin:0;           /* Zeramos as margens e o padding do UL para as células.encostarem     */
  padding:0;
  width:100%;         /* por default, os blocos são 100%, mas vamos garantir isso.           */
  height:100%;        /* aqui foi feito pra fins de demonstração apenas.                     */
}


li {
  display:block;             /* primeiro passo, transformar o LI em bloco.                   */ 
  list-style-type: none;     /* depois, remoção dos bullets.                                 */
  margin:0;
   padding:10px;                /* nao queremos espaços ente os blocos.                         */
  background-color:#666;     /* cor de fundo principal, o "grid" fazemos depois              */
  box-sizing: border-box;    /* medidas são de borda à borda, o padding não é acrescentado.  */
  height:25%;                /* esta linha é pela estética do demo                           */
}

li:nth-child(odd) {          /* este css será aplicato nos LI impares (1, 3, 5... ).         */
  clear:both;                /* forçamos a quebra de linha por segurança...                  */
  float:left;                /* ... e o alinhamos à esquerda.                                */
  width:50%;                 /* Aplicamos 50% na esquerda, os da direita "herdam" o resto.   */
}

li:nth-child(4n+2),          /* aqui pulamos de 4 em 4 itens começando do 2 ( 2, 6, ...).    */
li:nth-child(4n+3) {         /* aqui de 4 em 4 começando do 3 ( 3, 7, ... )                  */
  background-color:#444;     /* e mudamos a cor, dando efeito de quadriculado                */
}
<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>
</ul>

html, body, ul {
  position:relative;
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}


li {
  display:block;
  list-style-type: none;
  margin:0;
   padding:10px;
  background-color:#666;
  box-sizing: border-box;
  height:25%;
}

li:nth-child(odd) {
  clear:both;
  float:left;
  width:50%;
}

li:nth-child(4n+2), li:nth-child(4n+3) {
  background-color:#444;
}
<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>
</ul>

Segue uma solução CSS3 que leva em conta vários fatores:

  • Largura variável: você pode mexer no tamanho da UL, que as células acompanharão;

  • Segurança ao definir os 50% para não "estourar" o espaço disponível por inconsistências do browser;

  • Inclui a solução para o "quadriculado" das cores em CSS (mesmo que seja só pra ilustrar, é legal saber como se faz);

html, body, ul {      /* aqui o que importa é o UL, o resto é pra estética do demo.          */
  position:relative;  /* reset do position, não relacionado ao demo, mas bom pra uso geral.  */
  margin:0;           /* Zeramos as margens e o padding do UL para as células.encostarem     */
  padding:0;
  width:100%;         /* por default, os blocos são 100%, mas vamos garantir isso.           */
  height:100%;        /* aqui foi feito pra fins de demonstração apenas.                     */
}


li {
  display:block;             /* primeiro passo, transformar o LI em bloco.                   */ 
  list-style-type: none;     /* depois, remoção dos bullets.                                 */
  margin:0;                  /* nao queremos espaços ente os blocos.                         */
  background-color:#666;     /* cor de fundo principal, o "grid" fazemos depois              */
  box-sizing: border-box;    /* medidas são de borda à borda, o padding não é acrescentado.  */
  height:25%;                /* esta linha é pela estética do demo                           */
}

li:nth-child(odd) {          /* este css será aplicato nos LI impares (1, 3, 5... ).         */
  clear:both;                /* forçamos a quebra de linha por segurança...                  */
  float:left;                /* ... e o alinhamos à esquerda.                                */
  width:50%;                 /* Aplicamos 50% na esquerda, os da direita "herdam" o resto.   */
}

li:nth-child(4n+2),          /* aqui pulamos de 4 em 4 itens começando do 2 ( 2, 6, ...).    */
li:nth-child(4n+3) {         /* aqui de 4 em 4 começando do 3 ( 3, 7, ... )                  */
  background-color:#444;     /* e mudamos a cor, dando efeito de quadriculado                */
}
<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>
</ul>
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261

html, body, ul {
  position:relative;
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}


li {
  display:block;
  list-style-type: none;
  margin:0;
  padding:10px;
  background-color:#666;
  box-sizing: border-box;
  height:25%;
}

li:nth-child(odd) {
  clear:both;
  float:left;
  width:50%;
}

li:nth-child(4n+2), li:nth-child(4n+3) {
  background-color:#444;
}
<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>
</ul>