CSS Grid e Flexbox - Quando utilizar?

Tem dúvidas sobre quando utilizar CSS Grid e quando utilizar Flexbox? Esse artigo (e vídeo!) pode te ajudar 😁

Esse texto é uma versão em texto do vídeo: “CSS GRID e Flexbox - Quando utilizar?” que publiquei no meu canal no Youtube.

Vale a pena assistir! 😊

No passado

Quem trabalhou com desenvolvimento Front-end no passado sabe da dificuldade que a gente tinha pra fazer coisas triviais como um simples alinhamento vertical.

O mesmo acontecia no desenvolvimento de Grids, então passamos por fazer como: Layouts em tabela, colunas desenvolvidas com float (com clear: both claro 😱) até a gente chegar em soluções melhores como: Jeet, Lost ou mesmo os Grids do Boostrap.

Mas nenhuma delas é uma solução tão simples e completa como CSS Grid.

CSS Grid ou Flexbox?

Essa é uma dúvida muito comum.

Ambos ajudam demais no alinhamento (horizontal e vertical) e no desenvolvimento de grids dentro de aplicações modernas, mas justamente por ser possível resolver problemas parecidos (ou até iguais) com eles, as pessoas acabam tendo dúvidas de quando utilizar um e quando utilizar outro.

O fato é que eles podem e devem ser utilizados juntos!

Imagem mostrando a diferença entre CSS Grid e Flexbox

A imagem acima foi compartilhada pelo Diogo Moretti e ilustra muito bem a diferença entre os dois.

Se a gente imaginar uma casa:

  • CSS Grid: Seria responsável pela estrutura dos cômodos
  • Flexbox: Seria responsável pela disposição dos móveis dentro desses cômodos

Isso porque, Flexbox é unidimensional, ou seja, linha OU coluna, então é perfeito para o desenvolvimento interno de COMPONENTES.

CSS Grid é multidimensional (ou bidimensional), ou seja, linhas E colunas, perfeito pra LAYOUTS.

Na prática

Disclaimer 1: Todos os exemplos de código estão escritos em Sass Disclaimer 2: Os gatos das imagens são meus próprios gatos 😻

Card em bloco

Card em bloco

.card {
  background-color: #fff;
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 24px;
}

A primeira coisa é que nem sempre precisamos utilizar display: flex e display: grid, em casos em que queremos por exemplo, um card em formato bloco, ou seja, uma coisa em baixo da outra, podemos simplesmente utilizar display: block.

Lembrando que vários elementos do HTML, como div, section, article, h1, p, entre outros já são block, então muitas vezes nem precisamos explicitamente adicionar isso no CSS.

Sendo assim, para atingir o resultado da imagem acima, o código não precisou nem de display: flex nem de display: grid.

Componentes - Flexbox

Comportamento de coluna

Mas eventualmente vamos precisar, por exemplo, centralizar um card na vertical. Então display: flex se torna extremamente útil:

Alinhamento vertical

.card {
  background-color: #fff;
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
}

Lembrando que display: flex tem flex-direction: row por padrão então não precisamos escrever isso, mas quando queremos tratar isso em coluna precisamos explicitamente adicionar flex-direction: column.

O comportamento é parecido com display: block mas agora temos a possibilidade de alinhar verticalmente, utilizando justify-content e horizontalmente utilizando align-items (os eixos ficam invertidos em comparação ao flex-direction: row).

Comportamento de linha

Caso a gente queira que o card assuma comportamento de linha, basta remover flex-direction: column, isso porque como disse anteriormente display: flex tem flex-direction: row como padrão.

Alinhamento vertical

.card {
  align-items: center;
  background-color: #fff;
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  display: flex;
  padding: 24px;
}

E nesse caso o align-items: center faz o alinhamento vertical e justify-content o alinhamento horizontal.

Nesses exemplos é possível ver como fica simples e rápido manipular componentes com Flexbox, conseguimos ótimos resultados de uma maneira bem simples e com poucas linhas de código.

Layouts - CSS Grid

Agora que já entendemos como o Flexbox funciona bem com componentes, vou mostrar como o CSS Grid é perfeito pra layouts!

Se a gente quiser, por exemplo, adicionar os cards do lado do outro, em três colunas, precisamos somente adicionar algumas propriedades do CSS Grid no elemento pai.

Nesse caso criei um elemento .grid que fica responsável por organizar os grids, enquanto o componente card fica responsável pela exibição do card.

CSS Grid

.grid {
  display: grid;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-columns: repeat(3, 1fr);
}

Usando grid-column-gap e grid-row-gap a gente consegue adicionar espaçamentos entre os elementos filhos (vertical e horizontal!), sem encostar no código deles. Sensacional né?

Pensem o quão incrível CSS Grid é para cuidar dos grids das nossas aplicações 😍

Importante falar que até esse momento (08/2020), o Flexbox não tem a propriedade gap, mas isso está prestes a mudar!.

E acredite! Com CSS Grid a gente consegue grids responsivos sem media queries

Preciso mostrar o quão espetacular é isso.

CSS Grid - Autofit 2 colunas CSS Grid - Autofit 1 colunas

.grid {
  display: grid;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Se a gente quiser, por exemplo, que o grid tenha 3 colunas no Desktop, 2 colunas em Tablets e 1 coluna no Mobile, de acordo com o número de elementos que cabe na tela, é só adicionar autofit junto minmax.

250px é o tamanho mínimo das colunas na tela e 1fr representa uma fração do espaço disponível no grid.

Nesse artigo publicado no CSS Tricks em 2017, é possível entender melhor como a unidade fr funciona e porque ela é tão utilizada com CSS Grid.

Vale ver todos esses exemplos funcionando na prática 😜

https://codepen.io/felipefialho/pen/abdKyKP?editors=0100

Abrindo esse exemplo e redimensionando a tela, é possível ver que os grids se adaptam a resolução, tudo isso sem nenhuma linha de media queries 😁

Suporte

CSS Grid - Can I Use Flexbox - Can I Use

Tanto CSS Grid quanto Flexbox apresentam suporte completo em todos os navegadores modernos e suporte parcial desde o IE10!

Conclusão

Nos últimos anos o CSS ganhou várias features interessantes e que facilitam demais nosso dia a dia, sem dúvidas CSS Grid e Flexbox estão entre minhas propriedades favoritas.

Como já estão disponíveis faz alguns anos, conseguimos encontrar milhares de materiais que facilitam o aprendizado e o uso delas, posso deixar de exemplo:

Espero que tenham gostado do texto (e do vídeo, hahaha) ❤️