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 🙂