Flexbox vs Grid – Como construir os layouts de HTML mais comuns

Início » Tecnologia » Flexbox vs Grid – Como construir os layouts de HTML mais comuns


Existem tantos recursos CSS excelentes em toda a Internet. Mas e se você quiser apenas um layout simples e quiser AGORA?

Neste artigo, descrevo os 5 layouts de página da web mais comuns e como construí-los usando Flexbox e Grid.

Como isso vai funcionar

Há um link abaixo de cada layout para o código HTML e CSS completo no CodePen.

Observe que estou usando o SASS para redigir definições de estilo, portanto, se você quiser fazer o mesmo em seu local, instale o SASS usando:

npm i sass -g

Modelo de cartão básico

Usei o cartão acima como base para o layout da página da web. É composto por três elementos em uma direção vertical, então normal div blocos funcionariam bem. No entanto, mais tarde precisarei fazer o elemento do meio – o parágrafo do texto – esticar.

Aqui, o Flexbox e o Grid fazem o trabalho perfeitamente. Eu prefiro o Flexbox porque é mais direto para mim.

Vencedor: Flexbox

CodePen Flexbox, Grade CodePen

Agora vamos começar a criar nossos diferentes layouts.

# 1 Cartão centrado verticalmente e horizontalmente

Com o Flexbox, precisamos de um elemento centralizado horizontalmente e outro (o elemento filho) centralizado verticalmente.

A ordem dos itens é definida por flex-direction. Como o elemento se posiciona no espaço disponível é definido por align-self no elemento ou align-items em seu pai.

Com o Grid, precisamos de três colunas e três linhas. Em seguida, posicionamos o cartão na célula do meio.

A centralização horizontal é fácil. Definimos três colunas e seus tamanhos usando grid-template-columns: auto 33% auto já que o cartão deve ter até 1/3 da área visível.

O problema é que não sabemos as dimensões verticais. Queremos que as linhas superior e inferior ocupem o espaço restante, o que não é possível com a grade. O cartão está centralizado, mas sua altura depende da altura da janela.

No entanto, podemos resolver isso com um elemento de envolvimento adicional em torno do cartão e centralizá-lo usando margin.

Vencedor: Flexbox

CodePen Flexbox, Grade CodePen

# 2 Duas cartas centradas verticalmente e horizontalmente

Freqüentemente, precisamos centralizar mais do que apenas um elemento. Esses dois cartões também devem manter a mesma altura se um ou outro contiver texto mais longo.

Com o Flexbox, precisamos envolver os dois cartões em outro elemento e usá-lo para centralizar os dois cartões de uma vez.

Não podemos usar align-items aqui, pois isso se aplica ao eixo Y neste caso. Precisamos definir como o espaço restante no eixo X deve ser distribuído com justify-content: center. Isso garante que os dois cartões estejam centralizados horizontalmente.

Se omitirmos o problema de altura variável de Grid, podemos obter o mesmo resultado, mesmo sem quaisquer elementos de envolvimento adicionais. Desta vez, definimos grade com cinco colunas com grid-template-columns: auto 33% 50px 33% auto. O resto permanece igual ao do exemplo anterior.

Vencedor: Flexbox

CodePen Flexbox, Grade CodePen

# 3 Vários cartões com a mesma largura e altura

Este é outro caso de uso típico para blogs, sites de comércio eletrônico ou, geralmente, qualquer site que exiba algum tipo de listagem. Queremos que os cartões tenham a mesma largura e altura. A altura deve ser inferida do maior elemento da lista.

Isso pode ser feito no Flexbox usando flex-wrap: wrap. Os elementos passarão para a próxima linha se sua largura exceder o espaço restante de cada linha. No entanto, a mesma altura só é preservada no escopo de uma única linha, a menos que você defina explicitamente.

Rede mostra seu verdadeiro poder aqui. Este layout pode ser criado usando grid-auto-rows: 1fr que impõe a mesma altura em todas as linhas.

Vencedor: Grade

CodePen Flexbox, Grade CodePen

# 4 Texto e imagens alternados centralizados verticalmente e horizontalmente

Neste exemplo, temos texto com botões CTA acompanhados por uma imagem no outro lado. Ambos os componentes devem ser centrados verticalmente, pois seu tamanho pode variar.

Isso é moleza para o Flexbox. Cada linha é um article elemento dividido em dois contêineres de embalagem, .img e .content. Eles são necessários para uma distribuição uniforme de tamanho (flex-basis: 50%)

A centralização vertical do conteúdo interno é definida por align-items: center.

A alternância é obtida invertendo a direção do Flexbox por flex-direction: row-reverse em cada artigo estranho.

Rede lida muito bem com esse caso de uso. Não precisamos definir uma grade gigante, mas sim uma para cada article.

Ele define colunas igualmente largas que são centradas verticalmente usando align-items: center.

A alternância é definida no nível da célula por valores trocados para grid-column.

Vencedor: empate

CodePen Flexbox, Grade CodePen

Para conseguir esse design usando o Flexbox, ambos os lados do cabeçalho precisam ser representados por um único elemento.

O logotipo e o nome da empresa formam um anchor à esquerda, e o menu é um único nav elemento à direita. Flexbox os posiciona com justify-content: space-between.

Com o Grid, precisamos de duas colunas – uma para o logotipo e outra para o menu. O menu é outra grade que distribui o tamanho das colunas uniformemente usando grid-template-columns: repeat(4, minmax(0, 1fr)).

O problema aqui é que se quisermos adicionar outro item ao menu, também precisamos ajustar o CSS.

Vencedor: Flexbox

CodePen Flexbox, Grade CodePen

E o vencedor é…

A pontuação final é 5: 2 a favor do Flexbox, mas isso não significa que ele se torne o vencedor final do CSS. Há situações em que você precisa usar um ou outro, às vezes até os dois juntos, para conseguir o que precisa.

Se você precisa de um posicionamento flexível e condicional, use o Flexbox. Se você deseja criar listagens ou estruturas semelhantes que requerem elementos de tamanhos iguais ou têm um formato de tabela, use Grid.

Como desenvolvedor front-end, você não escapará sem conhecer os dois.

Guia de referência Flexbox, Guia de referência Grid

PS Se eu perder um layout que você usa diariamente, me avise em Twitter e vou preparar uma sequência 🙂





Fonte

Avalie este post

Clique nas estrelas

Média da classificação 0 / 5. Número de votos: 0

Nenhum voto até agora! Seja o primeiro a avaliar este post.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *