Como fazer divisão de tela em projetos web
A maioria dos desenvolvedores tenta resolver layouts divididos com tabelas ou posições absolutas. Isso funciona no início e depois quebra quando a tela muda de tamanho. A abordagem moderna usa CSS Grid ou Flexbox para criar aquele separador arrastável que você vê em editores de código e ferramentas de design.
O que é uma franja dividida no meio
O termo refere-se basicamente a uma interface onde dois painéis ocupam espaço horizontal ou vertical com uma linha divisória entre eles. A parte difícil não é criar as duas colunas. É fazer o separador funcionar quando o usuário arrasta ele. Eu já perdi tempo demais implementando isso do zero usando JavaScript puro. A solução simples é usar CSS Grid com colunas fixas primeiro, depois adicionar um elemento resize entre elas. O código fica algo como display grid com grid-template-columns definindo as proporções iniciais.
Implementação prática
Você precisa de três elementos filhos dentro de um container. O primeiro painel, o separador arrastável, e o segundo painel. O separador geralmente é uma div com width de 4px e cursor col-resize no CSS. O JavaScript fica responsável por calcular a posição do mouse durante o drag e atualizar as larguras dos painéis. Isso é tudo. Um exemplo mínimo funciona com cerca de 30 linhas de código. A maioria das bibliotecas que você encontra na internet tem entre 200 e 500 linhas porque adicionam funcionalidades que você provavelmente não vai usar.
Eu pessoalmente prefiro escrever minha própria implementação. Uma vez precisei lidar com um caso onde o separador tinha que respeitar limites mínimos de ambos os lados. Se o usuário arrastasse até o extremo, um painel desaparecia completamente e quebrava a usabilidade. A solução foi adicionar valores de min-width em pixels e recalculá-los durante o movimento do mouse.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Detalhes que ninguém menciona
O primeiro problema é o comportamento padrão do navegador durante o arrasto. O texto Selecionar acaba sendo ativado por padrão, o que quebra a experiência completamente. Você precisa desabilitar user-select no container durante o drag. Simples, mas fácil de esquecer. Outro detalhe é a persistência. Usuários esperam que a posição do separador seja lembrada ao recarregar a página. A solução mais comum é salvar a proporção no localStorage. Isso adiciona cerca de 5 linhas extras de código mas faz uma diferença enorme na usabilidade percebida.
Se seu projeto precisa de múltiplas divisões aninhadas, a complexidade cresce exponencialmente. Cada novo separador adiciona novos pontos de falha. Nesse caso vale a pena usar uma biblioteca consolidada ao invés de reinventar a solução.
Limitações reais
Layouts com splits não funcionam bem em telas muito pequenas. Se o painel direito ficar com menos de 200px de largura, o conteúdo interno fica ilegível. A solução padrão é esconder o separador e usar abas em dispositivos móveis. Isso requer media queries adicionais e teste em diferentes tamanhos de tela. Também há o problema de performance em listas muito grandes. Se cada painel contém um componente React ou Vue com muitos filhos, atualizar as larguras durante o drag pode causar reflows caros. A otimização usual é usar requestAnimationFrame para limitar as atualizações a 60fps no máximo.
Se você precisa de algo mais robusto do que um separador simples, existem alternativas como o Splitpanes para Vue ou o react-split-pane para React. Elas lidam com bord cases que você pode levar horas para resolver sozinho. O custo é adicionar uma dependência extra ao projeto. O básico funciona assim: container com display flex, dois filhos com flex-grow, e um separador com width fixa. Arrastar atualiza os valores de flex-grow via JavaScript. O resto é refinamento dependendo do seu caso específico.
