23.04.2025

Dividindo uma Lista Não Ordenada em Colunas no HTML

Resposta Rápida

Para criar um layout de duas colunas para uma lista não ordenada, podemos usar a propriedade CSS column-count:

ul { column-count: 2; }

Então, seu código HTML ficará estruturado assim:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Essa abordagem permite que a lista seja dividida em duas colunas com itens distribuídos de forma uniforme.

Utilizando Recursos Modernos de CSS

Além de column-count, o CSS oferece uma ampla gama de ferramentas para criar layouts em múltiplas colunas sem perder a correção semântica do código.

Layout em Grid como Solução

Usar um layout em grid é uma abordagem moderna, elegante e prática para estruturar seus layouts:

ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Grid de duas colunas para distribuição uniforme */
  justify-content: start; /* Alinha os itens à esquerda do contêiner */
  grid-auto-flow: column; /* Os itens fluirão automaticamente para as colunas */
}

Esse método é ideal para layouts responsivos.

Visualização

A aparência da nossa lista não ordenada em duas colunas pode ser representada da seguinte forma:

Sorvete (🍦) com dois sabores lado a lado:

Sabor Chocolate (🍫) no primeiro copo: [* Chocolate *, * Chocolate *, * Chocolate *]
Sabor Morango (🍓) no segundo copo: [* Morango *, * Morango *, * Morango *]

Em um layout de uma coluna, aparece assim:

🍦
🍫 Chocolate
🍫 Chocolate
🍫 Chocolate
🍓 Morango
🍓 Morango
🍓 Morango

Em um layout de duas colunas, a lista se divide exatamente como os copos de sorvete:

🍦🍦
🍫 Chocolate     🍓 Morango
🍫 Chocolate     🍓 Morango
🍫 Chocolate     🍓 Morango

Cada coluna distribui os itens uniformemente, criando uma combinação perfeita de componentes.

Design Responsivo e Suporte para Navegadores Antigos

Ao aplicar soluções modernas, é essencial garantir que o design seja responsivo e compatível com versões mais antigas dos navegadores. Utilize float: left combinado com uma largura especificada para os itens:

ul li {
  float: left; /* Os itens da lista se alinham em uma linha */
  width: 50%; /* Cada item ocupa metade do espaço disponível */
  list-style-position: inside; /* Os marcadores da lista são posicionados dentro do contêiner */
}

Transformando uma Lista em Duas Colunas Usando JavaScript

Para navegadores que não suportam CSS Grid ou column-count, o JavaScript pode ser empregado para manipular a árvore DOM:

var $lista = $('ul');
var itensLista = $lista.children('li');
var comprimentoLista = itensLista.length;
var meio = Math.ceil(comprimentoLista / 2); /* Dividindo a lista em duas partes */

/* Criando uma segunda coluna usando JavaScript */
$lista.after($lista.clone().addClass('coluna-dois'));

$('.coluna-dois').html('');
itensLista.each(function(i) {
  $(this).appendTo(i < meio ? $lista : $('.coluna-dois')); /* Distribuindo elementos entre as colunas */
});

Dessa forma, a lista é dividida ao meio, e os elementos são distribuídos em ambas as colunas.

Recursos Úteis

1. Guia Completo de Flexbox | CSS-Tricks — Construindo layouts flexíveis de duas colunas.
2. Usando Layouts em Múltiplas Colunas | MDN — Aplicando layouts em múltiplas colunas.
3. Exemplo no W3Schools — Emulando e demonstrando listas não ordenadas em múltiplas colunas.
4. A Propriedade columns | CSS-Tricks — Explorando o básico da formatação em múltiplas colunas.
5. Entendendo Flexbox | Smashing Magazine — Análise detalhada do Flexbox.
6. Uso Prático do CSS Grid | A List Apart — Aplicando CSS Grid em projetos reais com exemplos e dicas valiosas.

Video

Navigation