Accueil > Skills > Quando utilizar CSS Grid ou Flexbox? Dicas de um Desenvolvedor Frontend
Quando utilizar CSS Grid ou Flexbox? Dicas de um Desenvolvedor Frontend
As vezes é bem difícil decidir entre CSS Grid e Flexbox na hora de criar o seu layout, nesse artigo você vai entender as particularidades de cada tipo de layout e quais casos em que cada um deles é mais adequado.
Índice de conteúdo
CSS Grid ou Flexbox? Quando eu utilizo cada um deles?
Já arrancou os cabelos tentando decidir se era mais correto usar Flexbox ou CSS Grid em um layout? Está cansade de usar as mesmas 3 propriedades flex pra absolutamente tudo dentro de um layout? Está quase largando toda essa parafernália pra fazer layouts CSS do jeito que ensinam na faculdade (com table)? Esse texto é pra você.
CSS Grid e Flexbox: Quais as diferenças entre eles?
Por ser mais simples, geralmente o flexbox é o mais comumente 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.
css grid ou flexbox?
CSS Grid ou Flexbox: 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.
CSS Grid
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.
CSS Grid ou Flexbox: 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.
CSS Flexbox
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.
CSS Grid ou Flexbox: Quando não usar nenhum dos dois?
Sabe aquela bolinha de chat no canto inferior direito da página? Esse e qualquer elemento que precisa estar em um lugar muito específico do site pedem para ser absolutamente posicionados. Se você tentar encaixar esse elemento dentro do fluxo do site utilizando grid ou flex você provavelmente vai gastar muito código, principalmente quando for tornar o layout responsivo. Se você precisa controlar um elemento em específico em um layout, sempre se pergunte:
CSS Position
Eu preciso muito mais divisões no meu grid só pra posicionar esse elemento?
Eu preciso criar diversos containers flex só pra posicionar esse elemento?
Se ambas as respostas forem sim, prefira usar outras formas de posicionar esse elemento no layout, sejam elas absolutas e que tiram o elemento do fluxo da página (float e position) ou relativas dentro de um container próprio que pode ser relativamente posicionado, transformado ou possuir um display específico.
CSS Grid ou Flexbox: Quando usar os dois?
Sempre que puder, sempre lembrem que um grid-item pode ser também um flex-container e que um flex-item pode ser um grid-container, o segredo é avaliar o que a complexidade dentro de cada elemento pede e qual vai ser a maneira menos custosa de chegar no layout definido.
CSS Grid e Flexbox
A diferença crucial entre flexbox e grid, além do primeiro ser unidimensional e o outro ser bi-dimensional, é que o controle do layout no grid vem do container e no flexbox vem dos elementos. Como disse a Rachel Andrew, uma desenvolvedora especialista convidada do CSS Group e desenvolvedora do site Grid By Example em seu Ask Me Anything sobre
CSS Grid:
“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.”
A Le Wagon prepara sua mente para o desenvolvimento das habilidades essenciais para alcançar o sucesso. Escolha sua cidade e faça sua inscrição em nosso curso de Desenvolvimento Web em São Paulo, Rio ou Online e comece sua jornada de conhecimento.
