Começando do jeito certo
A maioria das pessoas começa errado porque acha que HTML é "estrutura" e CSS é "estilo". Isso é verdade, mas é uma descrição útil apenas para iniciantes. Na prática, você passa mais tempo resolvendo problemas de layout do que escrevendo marcação. O Guia prático e visual de html5 e css3 foca exatamente nisso: mostrar como as coisas funcionam quando você realmente precisa que elas funcionem. O primeiro problema real que quase todo mundo encontra é a confusão entre box-sizing, margins e padding. Você define uma largura de 300px num container, coloca um padding de 20px, e o elemento vira 340px. Aí você tenta encaixar dois desses containers lado a lado e eles não cabem. A solução imediata é resetar o comportamento padrão com * { box-sizing: border-box; }. Isso faz com que o padding e a borda sejam incluídos na largura total, não adicionados a ela. Simples, mas se você não fizer isso no início do projeto, vai perder horas ajustando floats e widths manualmente.
html5 e css3: guia prático e visual
Este guia não é teórico. Ele mostra o que acontece no navegador quando você aplica propriedades específicas, com exemplos que você pode copiar e testar. A ideia é que você veja o resultado antes de entender a regra. Layout com Flexbox: muitos desenvolvedores ainda usam grids manuais ou floats para alinhamento. Flexbox resolve problemas que pareciam complexos de outra forma. Para centralizar verticalmente um item dentro de um container, você só precisa de três linhas:
.container { display: flex; align-items: center; justify-content: center; } Isso funciona porque o flexbox trata o container como um contexto de layout flexível, onde os filhos são distribuídos ao longo do eixo principal e cruzado. Não é mágica, é apenas o comportamento padrão do modelo flex. O problema comum é tentar aplicar align-items num container que não tem display: flex. A propriedade simplesmente não faz nada, e você gasta tempo perguntando por quê.
CSS Grid para layouts assimétricos: quando você precisa de algo como uma sidebar de 250px fixa e um conteúdo principal que ocupa o resto, o grid é mais direto que o flexbox. O código é minimalista: .layout { display: grid; grid-template-columns: 250px 1fr; }
O 1fr diz ao navegador para usar o espaço restante na segunda coluna. Isso é útil porque você não precisa calcular porcentagens ou subtrair larguras manualmente. Se a tela for responsiva, você só precisa de uma media query para mudar o template em telas menores.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Problemas reais e soluções específicas
Um dos casos mais chatos que já vi foi com scroll-snap em containers com overflow. Você quer que o scroll páre exatamente no início de cada seção, mas o comportamento padrão do navegador às vezes ignora o snap quando há elementos absolutamente posicionados dentro do container. A workaround que funciona na maioria dos casos é envolver cada seção em um elemento adicional com position: relative e aplicar o scroll-snap-align nele, não no elemento original. Assim o navegador calcula o snap corretamente, sem conflito com o contexto de posicionamento. Outro detalhe que não aparece nos tutoriais básicos: transições em properties que causam reflow. Animações como width, height, margin e padding forçam o navegador a recalcularr o layout a cada frame. Isso consome CPU e trava a página em dispositivos móveis. Para animações suaves, use apenas transform e opacity. Esses propriedades são tratadas pela GPU e não disparam reflow. Um botão que expande ao passar o mouse deve usar transform: scale(), não width.
O que funciona e o que não funciona
CSS Grid e Flexbox são poderosos, mas têm limitações. Grid não funciona bem quando você precisa de layout que se adapte a conteúdo de tamanho variável sem media queries. Flexbox sofre quando você tem muitos itens em uma linha e quer quebrar automaticamente para a próxima linha sem definir alturas fixas. Nesse caso, flex-wrap: wrap com flex-basis ajuda, mas você ainda precisa calcular larguras relativas. Alternativa quando o grid falha: usar aspect-ratio com unidades fr. Isso mantém a proporção dos elementos sem depender de height fixo. Funciona em navegadores modernos, mas se você precisa suportar IE11, precisa de fallback com padding-bottom hack ou JavaScript.
Outro ponto fraco: responsividade baseada apenas em media queries pode criar layouts que parecem bons em telas grandes, mas ficam quebrados em tamanhos intermediários. O ideal é testar em breakpoints comuns (320px, 768px, 1024px, 1440px) e verificar se o conteúdo não vaza ou fica com espaçamento excessivo. CSS Container Queries estão surgindo como solução, mas ainda têm suporte limitado.
Como usar este guia
Cada exemplo aqui pode ser copiado para um arquivo HTML separado e aberto no navegador. A melhor forma de aprender é alterar os valores e ver o que muda. Tente remover o display: flex de um exemplo e observe o comportamento. Tente trocar gap por margin e compare. Se você está começando, foque em dominar primeiro o modelo de caixa (box model), depois flexbox, depois grid. Pular etapas gera muita frustração. A ordem não é rígida, mas ajuda a construir uma base sólida antes de enfrentar problemas complexos.
Para recursos adicionais, recomendo verificar a documentação oficial do MDN Web Docs, que tem exemplos interativos e atualizações frequentes sobre suporte de navegadores. Evite tutoriais desatualizados que ainda recomendam floats para layout, a menos que você esteja mantendo código legado.
