Layout
Visualização dividida
Split view
Divide o espaço em painéis relacionados, como lista e detalhe.
Exemplo didático · Representação visual do padrão
Quando usar
Comparar ou consultar detalhes mantendo uma lista visível.
Cuidados e acessibilidade
Em telas pequenas, considere uma navegação sequencial em vez de comprimir ambos os painéis.
Partes e comportamento
Painéis complementares e divisão de espaço entre eles.
Não confunda
Uma divisão fixa e um divisor arrastável são decisões diferentes.
Exemplo de código
.painel { display: grid; grid-template-columns: 16rem minmax(0, 1fr); }
@media (max-width: 45rem) { .painel { grid-template-columns: 1fr; } }Trecho didático. Integre e teste no contexto do seu projeto.