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 C# - Algoritmos
Conhecer o cursoQuando 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.