Olá, Web Developers!

Houve um tempo em que posicionar elementos pelo CSS poderia ser trabalhoso, dependendo do que fosse preciso criar.

Então veio o Flexbox, facilitando o posicionamento de elementos. Logo em seguida os navegadores começaram a dar suporte ao CSS Grid, e então muitos ficaram com a dúvida: FlexBox ou CSS Grid?.

Um erro comum é pensar que o CSS Grid veio para ocupar o lugar do FlexBox, já que os navegadores começaram a dar suporte mais recentemente. Mas esse é um grande erro.

• Flexbox faz coisas que o CSS Grid não pode fazer;

• CSS Grid faz coisas que o Flexbox não pode;

• Ambos podem trabalhar em conjunto;

• Há coisas que podemos fazer com ambos, mas que um faz de maneira melhor e mais simples;

Curso React - Dominando Componentes Funcionais

Conhecer o curso

Quando usar FlexBox?

Claro que podemos usar o flexbox para trabalhar com elementos em duas dimensões, mas flexbox é mais bem utilizado quando estamos trabalhando com elementos em apenas uma dimensão, seja linha ou coluna.

Um bom exemplo é quando criamos um menu, seja ele vertical ou horizontal.

Eu diria que ele é bom para alinhar elementos, não importa a direção. Além disso, não precisamos nos importar com a quantidade de itens, já que o Flexbox não requer que isso seja declarado.

Quando usar o Grid?

Claro que podemos usar o Grid para trabalhar com elementos em uma única dimensão, mas ele é ótimo quando estamos trabalhando com elementos em duas dimensões, principalmente para definir a estrutura de uma página, o que seria muito mais difícil com FlexBox.

Você pode indicar onde um elemento começa e onde ele acaba na sua grid, o que te dá muita flexibilidade. Ou também pode-se dar nomes para as áreas da sua grid, e então indicar a um elemento que ele pertence àquela área, o que deixa o código muito mais legível e simples de manter, como mostrado no exemplo acima.

Então, se você tiver já um determinado número de linhas e colunas, provavelmente Grid será melhor do que o FlexBox para você neste momento.

Além disso, é provável que escreva bem menos media queries, já que podemos aproveitar funcionalidades como auto layout, minmax(), repeat() e auto-fill.

Quando usar os dois juntos?

E claro que podemos aproveitar o melhor dos dois mundos!

No exemplo acima foi feito o seguinte:

• O layout da página foi definido com CSS Grid;

• O cabeçalho possui um menu, o qual teve seus itens organizados com FlexBox;

• Cada item do menu possui uma pequena estrutura para posicionar seus elementos (ícone e textos), que pode ser vista pelas bordas brancas. Isso foi feito com CSS Grid.

Conclusão

Então, dependendo da necessidade, um pode ser uma opção mais viável, mas não é errado usar o outro.

Nada te impede de comer com duas facas ou com dois garfos, mas usar os dois juntos e saber o melhor momento de usar cada um facilita a nossa vida, não é mesmo?

Conforme você for obtendo mais intimidade com FlexBox e CSS Grid, a escolha pelo melhor para a sua necessidade ficará cada vez mais intuitiva.

Curso Flutter - Conhecendo o GetX

Conhecer o curso