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."