0

Flexbox VS Grid: Qual o melhor?

#HTML #CSS
Bruno Cabral
Bruno Cabral

Vocês vão perceber que na maioria dos meus artigos eu sempre respondo a pergunta com:


Depende...


A primeira coisa que deve ser comentado é que não necessariamente precisamos escolher entre as duas, mas sim, as duas. Existem coisas que apenas flexbox faz, assim como existem coisas que apenas grid faz, portanto, cabe ao programador avaliar qual usar e até mesmo usar as duas dentro de um projeto.


No flexbox trabalhamos com linha ou coluna, não podemos definir linhas e colunas, o que difere bastante de grid, já que em grids podemos definir várias linhas e colunas.

Por exemplo:

display: grid;
grid-template: 20% 20% / 20% 20% 20%;
*Neste exemplo criamos duas linhas e três colunas com a tecnologia grid, cada uma com 20% de tamanho.*


A principal virtude de uma flexbox seria a facilidade de alinhar itens em qualquer lugar da sua página, sendo ótimo para trabalhar em projetos em que não demandam utilizar várias linhas e colunas. Já a principal virtude da grid é a possibilidade de estruturar o layout de uma página completa, já que pode indicar onde um elemento começa e onde ele termina, além de ter várias linhas e colunas para alinhar onde quiser.


OBS: Alinhar os filhos diretos de um container com dimensão única é muito mais fácil com flexbox.


Podemos usar os dois juntos em algumas situações, por exemplo:

Ao criarmos um layout de uma página web, podemos usar grids para separar cada section e usarmos um display flex apenas na nav bar, já que geralmente se trata de uma linha, com isso, podemos estilizar da maneira ideal ao projeto e organizar utilizando as duas tecnologias.


Conclusão


A resposta inicial foi depende porque cada situação demanda o uso de uma das tecnologias, talvez para resolver alguma situação do seu projeto, grid pode facilitar bastante, mas para outras apenas dificulta mais sua vida, portanto, ter o conhecimento das duas ajuda bastante, pois possibilita você construir qualquer tipo de estilização de acordo com a sua necessidade.

0
2

Comentários (6)

1
Fernando Aguiar

Fernando Aguiar

09/04/2021 01:21

Parabéns, Bruno Cabral! seu artigo está excelente.

1
Rogério Ferreira

Rogério Ferreira

09/04/2021 07:02

Muito legal seu artigo. Para eu que estou no começo do estudo dessas tecnologias é ótimo ter essa visão de quem já as utiliza, fica sendo mais um forma de se enxergar o assunto.

Parabéns!

1
Vinicius Souza

Vinicius Souza

08/04/2021 23:45

Ótimo artigo !

0

Muito Bom Bruno, inclusive os comentários, top⭐

1
Nicholas Souza

Nicholas Souza

09/04/2021 05:50

Os dois são muito bons, alinha as divs sem ficar 2h ajustando kkkkkkkkkkk. De modo geral eu prefiro o flexbox, porque é mais fácil de centralizar ícones

1
Márcio Cardoso

Márcio Cardoso

08/04/2021 23:47

Falae Bruno beleza, como vc falou é bom saber as duas tá certo, o sistema grid na minha opinião é muito poderoso

Consegue manipular mais facilmente os itens, e dependendo do projeto, escreve bem menos código com grid , minha opinião.

E justamente uns dois dias atrás eu estava testando essas diferenças, não testei a fundo, o que consegui testar são diferenças sutis, quase não percebe.

Fã de tecnologia, músico nas horas vagas e web developer em tempo integral.

Brasil