Agora que já sabes dividir a página com <div>, vais aprender a posicionar essas secções lado a lado e a criar layouts modernos com CSS.
Com estas técnicas, vais conseguir construir páginas mais equilibradas, parecidas com as de sites reais.

Estrutura base de um layout com 3 colunas

Explicação

• display: flex; → organiza as

  lado a lado de forma automática.

   

• flex: 1, flex: 2 → definem a largura relativa de cada coluna.

• gap → adiciona espaço entre as colunas.

• border-radius → arredonda os cantos das caixas.

• padding e margin → criam espaços interiores e exteriores, tornando o layout mais limpo.

Dicas

• Usa cores suaves para distinguir áreas diferentes.
• Testa o layout no navegador e redimensiona a janela — vais ver como o conteúdo se adapta.
• Podes usar flex-direction: column; para organizar os elementos na vertical.