Article image
Tiago Santos
Tiago Santos11/02/2022 11:23
Compartilhe
Curso CSS Developer
Recomendado para vocêFormação CSS Web Developer

CSS Grid ou Flexbox?

  • #CSS

CSS Grid e Flexbox: Quais as diferenças entre eles?

 

Por ser mais simples, geralmente o flexbox é o mais utilizado. O que ele faz é transformar o elemento em que ele foi aplicado em um container flex e os filhos desse elemento em flex items. O container flex tem como papel definir a posição dos filhos, definir em qual direção eles vão se enfileirar (coluna ou linha) e caso uma linha de elementos atinja a altura ou largura total do container, se essa fila de elementos vai quebrar ou não (flex-wrap). Na prática, o flexbox serve para criar layouts em uma dimensão, ou seja, uma grande fila que pode ser ou uma coluna ou uma linha e quando e se ela vai quebrar linha ao atingir o tamanho do container.

 

O Grid por sua vez cria um layout bidirecional, você consegue definir a posição dos elementos em linhas e colunas ao mesmo tempo. Enquanto o flexbox depende da aplicação de propriedades nos filhos para criar layouts com elementos de tamanhos diversos (flex-basis, flex-grow e flex-shrink), esses layouts complexos podem ser criados diretamente no container grid, pois os filhos (grid-items) se adaptam ao tamanho das suas grid-templates.

 

Quando usar Grid?

Geralmente vemos o grid sendo utilizado para definir os layouts base de sites, são criadas grid-template-areas com nomes de "navbar", "header", etc e essas são aplicadas nas suas respectivas seções do site. O conceito de criação de templates é sobre isso - a delimitação de um layout em que elementos deverão se encaixar nele, e não o contrário. 

Esse é um caso de uso muito bom por dois motivos:

  • Ao criar media queries, ao invés de modificar cada item individualmente, você só precisa reajustar as grid-templates do container grid.
  • Componentes e seções de página costumam ter designs que cobrem múltiplas colunas e linhas, coisa que pra fazer com flex provavelmente fariam você gastar umas boas divs pra conseguir o mesmo resultado.

 

Mas há casos em que a lógica de grid se aplica dentro de componentes e seções também. Se no layout do seu componente você precisa aplicar diversas propriedades nos elementos filhos para eles se encaixarem no layout, você deveria usar grid. O flexbox foi pensado para que você possa enfileirar conteúdos de diversos tamanhos sem se preocupar se eles vão quebrar o container de alguma forma (overflow), se você precisa aplicar propriedades específicas em filhos para ter maior controle de layout e posicionamento, o grid tem muito mais a oferecer com um custo muito menor - controle direto no container.

 

Outra característica do grid é que é possível sobrepor elementos em um mesmo local apenas designando eles para a mesma grid-area. A ordem de sobreposição vai ser a mesma ordem em que esses elementos estão no HTML, o ultimo por cima. O container grid também cria um container block, isso significa que se você posicionar um elemento absolutamente dentro de um container grid, esse elemento vai se comportar como se o container grid tivesse um position: relative.

 

Resumindo

Se você está usando mais de um container flex para organizar elementos em um layout, provavelmente um deles deveria ser grid. Se você precisa aplicar diversas propriedades nos elementos filhos para ter maior controle do layout, você provavelmente deveria estar fazendo isso com grid. Se seu layout tem elementos diretos que ocupam tanto linhas quanto colunas, sempre use grid, e, por último, se você só quer que seus elementos se encaixem dentro de um layout, use grid.

Quando usar o Flexbox?

Use o flexbox de semáforo. Sendo unidimensional o flexbox é perfeito para tornar o posicionamento de itens um trabalho do container mais do que dos próprios itens, acabando de vez com a supremacia do inline-block ou dos floats. Em um container flex o seu layout vai ser controlado pelo tamanho e altura dos itens flex, sendo papel do container dizer qual a direção que esses elementos vão enfileirar e se eles vão quebrar ao atingir as beiradas do container.

Outra característica do flex é sua maneira de alinhar os flex-items. Propriedades como justify-content espaçam os itens do container de maneira proporcional independente do tamanho de cada flex-item e levando em consideração todas as propriedades que você aplicar no container, ou seja, o conteúdo que toma a maioria das decisões de layout.

 

Resumindo

Se alinhamento, espaçamento e direção é o máximo de controle que você precisa ter dos seus elementos, use flex. Se você precisa encaixar elementos dentro de um container da forma que eles são, sem se preocupar com o tamanho individual de cada elemento, flexbox.

"No geral, se eu tenho elementos que eu só quero que estejam igualmente espaçados ou alinhados independente do tamanho deles, flexbox. Se eu quero criar um layout e colocar coisas nele, isso é Grid." 

Rachel Andrew desenvolvedora do site Grid By Example em seu Ask Me Anything.

Para entender mais sobre o assunto vou deixar aqui 2 sites que falam isso e muito mais:

https://www.lewagon.com/pt-BR/blog/css-grid-ou-flexbox

https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

QUE TAL APRENDER O QUE É BEM?

NESSE OUTRO ARTIGO VOCÊ VAI SABER UM POUCO MAIS SOBRE A METODOLOGIA BEM!

https://web.dio.me/articles/voce-sabe-o-que-e-bem?page=1&order=oldest

image

Compartilhe
Recomendado para você
  • Curso JavaScript Developer
  • Curso UX Designer
  • Curso Golang Developer
Comentários (5)
Cleiton Carvalho
Cleiton Carvalho - 14/06/2022 12:51

Que conteúdo fod#, amei cara. Parabéns.

Joao Vieira
Joao Vieira - 14/06/2022 09:03

Artigo muito útil, estou estudando CSS e com certeza vai me ajudar bastante no progresso do meu estudo.

Raja Novaes
Raja Novaes - 14/06/2022 07:18

Que conteúdo útil, não tinha parado para analisar dessa forma. Obrigado por compartilhar.

Tiago Santos
Tiago Santos - 11/02/2022 12:49

Que bom que foi útil, eu estava estudando sobre e achei legal compartilhar, aqui não tem curso sobre o grid mas no youtube tem bastante conteúdo!


https://www.youtube.com/watch?v=x-4z_u8LcGc&t=1809s

Moacir Gonçalves
Moacir Gonçalves - 11/02/2022 12:39

Rapaz, gostei bastante do artigo. Eu vou pesquisar mais sobre grid em breve. Eu geralmente uso flexbox pela simplicidade mesmo, como você disse. Em sites mais simples, geralmente landing pages, eu consigo ter o layout que quero usando flexbox. Mas bem interessante a utilidade do grid layout!

Estudante de Análises e Desenvolvimento de Sistemas na Cruzeiro do Sul
Recomendado para vocêCurso CSS Developer