Estou começando a estudar CSS e fico muito confuso sobre quando usar Flexbox e quando usar Grid. Além disso, sempre me perco na hora de centralizar elementos ou criar espaçamentos entre os menus. Aquela velha dúvida como centraliza uma div?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Estou começando a estudar CSS e fico muito confuso sobre quando usar Flexbox e quando usar Grid. Além disso, sempre me perco na hora de centralizar elementos ou criar espaçamentos entre os menus. Aquela velha dúvida como centraliza uma div?
Oi, Eduardo! Essa é uma das dúvidas mais comuns de quem está começando, e é super normal se confundir no início. Vamos desmistificar isso juntos de um jeito simples.
A principal diferença entre os dois está na dimensão do layout que você quer criar:
O Flexbox trabalha em uma única dimensão por vez (ou uma linha OU uma coluna).
.container {
display: flex;
justify-content: center; /* Centraliza na horizontal */
align-items: center; /* Centraliza na vertical */
}
O Grid trabalha em duas dimensões simultaneamente (linhas E colunas ao mesmo tempo).
Para criar espaços entre itens de menus ou colunas sem precisar ficar calculando margens para cada um, a propriedade gap funciona muito bem tanto no Flexbox quanto no Grid. Por exemplo:
.menu {
display: flex;
gap: 20px; /* Cria um espaço de 20px entre cada item automaticamente */
}
Para visualizar essas estruturas funcionando na prática, você pode dar uma olhada neste Guia Visual: Posicionamento CSS no CodePen. Ele mostra de forma bem clara como o Flexbox resolve a centralização e como o Grid organiza colunas de forma estruturada.
Espero que essa explicação ajude a clarear suas ideias nos próximos projetos! Se precisar de algo mais, é só chamar.
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!