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?
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!