Nessa ultima aula, ao chamar .navbar__items{}, por que não usamos o diplay-flex? Já que iremos alinha-los em apenas uma direção e em uma linha apenas?
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!
Nessa ultima aula, ao chamar .navbar__items{}, por que não usamos o diplay-flex? Já que iremos alinha-los em apenas uma direção e em uma linha apenas?
Oi, Gabriel, tudo bem?
Na aula, o objetivo era organizar três elementos da navbar lado a lado, cada um ocupando uma coluna igual. O Grid é especialmente poderoso quando você precisa criar layouts bidimensionais, ou seja, que envolvem tanto linhas quanto colunas. No seu caso, mesmo que seja apenas uma linha, o Grid facilita a criação de colunas de tamanho igual com a propriedade grid-template-columns: repeat(3, 1fr).
Usar display: grid permite que você defina explicitamente o número de colunas e o tamanho delas, o que pode ser mais intuitivo e direto para este tipo de layout. Aqui está um exemplo prático:
.navbar__items {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Isso cria três colunas de tamanhos iguais, o que pode ser mais simples do que configurar o Flexbox para fazer o mesmo.
Por outro lado, o Flexbox é excelente para layouts unidimensionais, ou seja, alinhar itens em uma única linha ou coluna. Ele é mais flexível (como o nome sugere) e pode ser usado para distribuir espaço entre itens, alinhar itens verticalmente e horizontalmente. No seu caso, para alinhar os ícones e textos verticalmente dentro de cada item da navbar, o Flexbox foi usado:
.navbar__item button {
display: flex;
flex-direction: column;
align-items: center;
row-gap: .4rem;
}
Aqui, o Flexbox facilita o alinhamento vertical dos ícones e textos, além de centralizá-los.
Então, a escolha de usar Grid para .navbar__items e Flexbox para .navbar__item button é uma combinação que aproveita o melhor de cada tecnologia para resolver problemas específicos de layout.
Para saber mais sobre o Flexbox e o Grid, você pode ler os artigos abaixo:
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!