Grade ou Flexbox?

Michelle Barker, a autora do material que estamos publicando hoje, diz que uma recente discussão no Twitter iniciada por Chris Koyer a fez pensar em como os desenvolvedores da web escolhem entre as tecnologias CSS Grid Layout e CSS Flexbox Layout ao criar layouts.



Chris Koyer em seu tweet fez ao público uma pergunta sobre como aqueles que sabem o que o Grid e o Flexbox preferem explicar a diferença entre essas tecnologias.

Entre as respostas a essa pergunta, que, segundo Michelle, era bastante esperada, foi possível observar as ideias valiosas de Rachel Andrew e Jen Simmons.

Rachel disse que a tecnologia Flexbox é projetada para desenvolver layouts unidimensionais que descrevem como os elementos são organizados em uma linha ou coluna. E a tecnologia Grid foi projetada para desenvolver layouts bidimensionais que incluem linhas e colunas.

Jen diz que a tecnologia Grid é usada para descrever layouts de linhas e colunas. Nesse caso, o conteúdo estará localizado nas células do layout exatamente como o desenvolvedor precisa. Ao usar o Flexbox, isso não é verdade e não se trata apenas de colocar dados na segunda dimensão (isso já é compreensível), mas também de colocá-los em uma dimensão. A tecnologia Flexbox não é adequada para a maioria dos casos em que é usada.

Michelle observa que apenas ler tweets não revela os recursos do uso das tecnologias Grid e Flexbox. Neste artigo, ela quer falar sobre quando e onde usar essas tecnologias, e também sobre por que uma tecnologia pode ser preferida a outra.

Lendo as respostas à pergunta de Chris, Michelle ficou surpresa com o número de pessoas que disseram que usariam o Grid apenas para layouts no nível da página e o Flexbox para todo o resto. Se você também aderir a essa regra, isso significa que você se limitará seriamente ao usar os poderosos recursos do Grid em várias situações. A principal coisa que o autor do material gostaria de recomendar aos desenvolvedores da Web é que cada layout seja percebido como algo especial, analise os recursos disponíveis e não faça suposições sobre quais tecnologias serão necessárias para criá-lo. Aqui estão algumas perguntas que você pode fazer ao escolher uma tecnologia adequada para o desenvolvimento do layout.

Quantos cálculos você precisa fazer?

Aqui está a minha resposta para a pergunta de Chris. Eu disse então que, se me parece que, ao criar o layout, você deve usar a função CSS calc() muita frequência, isso geralmente significa que eu preciso da tecnologia Grid, não do Flexbox.

Se você costuma recorrer à função calc() para calcular com precisão os tamanhos de linhas e colunas (se precisar levar em consideração campos internos, por exemplo), isso geralmente indica que você deve considerar o uso da tecnologia Grid, pois o uso da unidade medir fr simplificará bastante sua vida. Embora, como recomendação geral, esse conselho seja bastante viável, ele não descreve o quadro completo do que está acontecendo. Às vezes, o Grid também pode ser necessário nos casos em que a função calc() não é usada ao criar o layout. Por exemplo, em uma situação em que estamos falando de um layout bidimensional com uma largura fixa, cujos elementos têm 200 pixels de largura. Ao desenvolver esse layout, a função calc() não é necessária para descobrir a largura dos elementos, mas, ao mesmo tempo, o comportamento dos layouts criados com base no Grid pode ser extremamente útil. Da mesma forma, são possíveis situações nas quais é melhor usar o Flexbox e inevitavelmente usar a função calc() . Como resultado, o que estamos falando aqui é melhor percebido, não como uma regra rígida, como esta: “Use calc() e Flexbox? Então você precisa mudar para o Grid ”, mas como informação para pensar.

Uma dimensão ou duas?

Uma diferença séria entre as tecnologias Grid e Flexbox é que a primeira permite controlar a disposição dos elementos em duas dimensões (em linhas e colunas), e a segunda não permite isso. Novamente, isso não significa que você nunca deve usar o Grid para layouts unidimensionais. Costumo escolher a Grade - nesses casos, quando preciso de alta precisão no controle do tamanho e da posição dos elementos localizados em uma dimensão. Essa abordagem é demonstrada neste exemplo no CodePen e neste artigo complementar.


Exemplo de grade

Como os elementos devem se comportar?

A tecnologia de grade geralmente faz sentido usar nos casos em que o desenvolvedor precisa controlar o comportamento do layout em duas dimensões. No entanto, isso não significa que a grade seja sempre melhor que o Flexbox. Ao usar a Grade, o desenvolvedor tem à sua disposição linhas e colunas, células e as chamadas áreas da grade, que são uma célula ou um grupo de várias células. Ao usar uma grade, os elementos devem estar localizados nessas células ou áreas.

Suponha que tenhamos um layout baseado em grade que difere nos seguintes recursos: existem nove elementos organizados em três linhas de três elementos da esquerda para a direita, e há 20 pixels entre os elementos. Esse layout pode ser criado usando Grid e Flexbox. O código para descrever esse layout baseado em grade é muito mais simples e limpo:

 .grid {   display: grid;   grid-template-columns: repeat(3, 1fr);   grid-auto-rows: 200px;   /*     ,   ,      .        , `auto`,  ,        . */   gap: 20px; } 

O uso desse layout leva ao fato de que os elementos são colocados automaticamente, enquanto não precisamos fazer mais nada. Se nos dermos tempo para pensar, podemos usar as minmax() Grid auto-fit() e minmax() , que nos permitem obter um layout totalmente responsivo sem usar consultas de mídia. Abra este exemplo, tente redimensionar a janela e veja o que acontece.


Exemplo de grade

Você pode aprender mais sobre essa técnica, além de outras coisas úteis, assistindo a este vídeo.

Se criamos um layout semelhante usando o Flexbox, ao contrário do exemplo descrito, precisaríamos estilizar os elementos e o contêiner:

 .grid {   display: flex;   flex-wrap: wrap;   margin: -10px;   width: calc(100% + 20px); } .item {   width: calc((100% / 3) - 20px);   flex: 0 0 auto;   margin: 0 10px 20px 10px; } 

Aqui, no contêiner, você precisará especificar um valor negativo para a propriedade de margin - para neutralizar o fato de que a largura total dos elementos é maior que o próprio contêiner e, assim, transferir dados para a próxima linha. Além disso, este exemplo não pode demonstrar o mesmo comportamento responsivo sem esforço adicional de nossa parte. Além disso, deve-se notar que o uso de consultas de mídia provavelmente pode ser necessário aqui.

Aqui está um exemplo no CodePen que ilustra o acima.


Exemplo do Flexbox

Existem várias maneiras de criar o mesmo layout usando o Flexbox, mas todas elas requerem o uso de alguns "hacks", e isso acontece pelo motivo de que essa é a sua natureza. Na verdade, estamos falando sobre o fato de estarmos tentando usar a tecnologia Flexbox para o que ela realmente não se destina. Mas isso não significa que o Flexbox seja sempre uma escolha malsucedida da base do layout.

Muitas estruturas CSS modernas usam alguma variação desse método para representar layouts. E, a propósito, se você quiser ir por esse caminho, posso recomendar o Susy , um conjunto de ferramentas que assume todas as dificuldades na criação desses layouts.

Então, o que é melhor escolher nesta situação? Grade ou Flexbox? Parece que o Grid tem algumas vantagens inegáveis ​​aqui, mas, para responder a essa pergunta, precisamos pensar no que deve acontecer se tivermos mais de nove, mas menos de 12 elementos (se houver algum). por exemplo, 12, isso permitirá que eles preencham completamente uma nova linha). Precisamos que os novos elementos estejam simplesmente no início da próxima linha, como foi o caso nos exemplos que vimos? Ou precisamos que eles se comportem de maneira diferente? Talvez se houver apenas um elemento na próxima linha, precisamos ocupar todo o espaço dessa linha, como na opção A do exemplo a seguir? Ou talvez, se houver apenas dois elementos na nova linha, precisamos que eles estejam centralizados, como no Exemplo B?


Opções diferentes para colocar itens na última linha

Ao usar um layout baseado em grade com posicionamento automático de elementos, temos apenas uma opção - colocar um novo elemento em uma célula acessível localizada à esquerda. Um arranjo semelhante de elementos pode ser encontrado em exemplos anteriores. Aqui, partimos da suposição de que a propriedade direction não está configurada para rtl (nesse caso, os elementos estariam localizados da direita para a esquerda e o único elemento na última linha estaria localizado na célula direita). Como resultado, novos elementos ao usar a Grade são colocados nas seguintes células da grade disponíveis. A tecnologia Flexbox permite controlar de maneira flexível o layout dos itens. Isso significa que podemos controlar o comportamento dos elementos usando uma combinação de propriedades que controlam o posicionamento dos elementos e seu alinhamento.

Aqui está um exemplo que demonstra esses layouts, ao usar qual ou dois elementos por linha, calculados em três elementos, ocupam toda a linha.


O item ocupa todo o espaço de linha disponível.

Como resultado, verifica-se que, independentemente da tecnologia usada para criar o layout, tudo se resume a que tipo de comportamento os elementos localizados no layout são de interesse do desenvolvedor. E em situações diferentes, respostas diferentes podem ser dadas para a mesma pergunta.

Você está tentando substituir o Flexbox por uma grade?

Quando falo em vários eventos, as pessoas costumam me perguntar quando eu usaria o Flexbox em vez do Grid e se realmente precisamos de tecnologia como o Flexbox. Como vimos no exemplo anterior, o Grid não substitui o Flexbox. Ambas as tecnologias coexistem bastante pacificamente, e o conhecimento das situações em que cada uma delas se mostra melhor expande as possibilidades de criação de layouts.


Exemplo de componente

Esta figura mostra um componente, durante o trabalho com o qual é necessário controlar o posicionamento do texto, imagem e título, considerando as colunas e as linhas. Também aqui você precisa controlar como eles, em certa medida, interagem entre si. A única maneira de resolver satisfatoriamente esse problema é usar a tecnologia Grid.
Mas, sem hesitar, usarei a tecnologia Flexbox para criar um menu de navegação, como o mostrado neste exemplo.


Menus criados pelo Flexbox

Aqui é necessário controlar a disposição dos elementos em uma única dimensão, e é necessário que os elementos se comportem de maneira flexível. A tecnologia Flexbox faz seu trabalho perfeitamente. Graças ao uso do Flexbox, você pode especificar se esses elementos devem ser agrupados em novas linhas ou não, o que permite exibi-los com precisão se o espaço disponível na página não permitir exibir todos os elementos em uma linha.

Como o layout deve ficar em navegadores que não suportam a tecnologia Grid?

Se usarmos a tecnologia Grid, um dos possíveis problemas que precisamos levar em consideração é o suporte ao navegador para essa tecnologia. Imediatamente, precisamos pensar no que acontecerá se nossa página for exibida em um dos navegadores que não oferecem suporte ao Grid (por exemplo, no IE 11 e abaixo). Minha abordagem para resolver esse problema é usar @supports regras do @supports e preparar o código para diferentes navegadores. Freqüentemente (mas nem sempre) eu, como substituto de um layout baseado em grade, uso um layout baseado em Flexbox para navegadores bastante antigos.

 .grid {   display: flex;   flex-wrap: wrap;   /*  ,     */ } @supports (display: grid) {   .grid {       display: grid;       /*  ,  Grid */   } } 

É verdade, deve-se notar aqui que, se você passa muitas horas tentando recriar sem usar o Grid, o que foi feito com essa tecnologia, talvez você não tenha muito desde o início existem muitas razões para usar o Grid. Afinal, essa tecnologia é especialmente boa, pois é capaz do que não pode ser feito exclusivamente com o Flexbox.

Sumário

Discutimos alguns exemplos muito simples e abrangentes de desenvolvimento de layout, examinamos os recursos do uso das tecnologias Grid e Flexbox em sua construção. Esperamos poder dar ideias a quem está ocupado escolhendo a tecnologia certa para o seu próximo layout.

Caros leitores! Em que situações você usa a tecnologia Grid e em que - Flexbox?