Fale com a gente no WhatsApp Fale com a gente no WhatsApp
Fale com a gente no WhatsApp

CSS

FlexBox ou CSS Grid?

Houve um tempo em que posicionar elementos pelo CSS poderia ser trabalhoso, dependendo do que fosse preciso criar. Temos duas especificações que resolvem esses problemas: FlexBox e CSS Grid. Você sabe quando usar uma ou outra?

há 6 anos 7 meses

Formação Desenvolvedor HTML e CSS
Conheça a formação em detalhes

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;

Teste de Software Intermediário
Curso Teste de Software Intermediário
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.

Spring Framework - Autenticação via JWT
Curso Spring Framework - Autenticação via JWT
Conhecer o curso

Autor(a) do artigo

Akira Hanashiro
Akira Hanashiro

Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos.

Todos os artigos

Artigos relacionados Ver todos