Resolvendo problemas com CSS Grid e Flexbox: a interface do usuário do cartão

O padrão “card” teve grande sucesso nos últimos tempos, mas a maneira como os construímos ainda é limitada devido ao CSS disponível para nós. Até agora, é isso. Ao combinar CSS Grid e Flexbox, podemos fazer cartões que se alinham perfeitamente, se comportam de forma responsiva e se adaptam ao conteúdo dentro deles. Vamos ver como!

O que vamos construir

Neste tutorial CSS Grid e Flexbox vamos construir esta interface de cartão (confira a versão de página completa para uma ideia mais clara):

Em vários pontos de interrupção, a disposição do cartão mudará da seguinte forma:

Pontos de interrupção do layout CSS Grid
1: pequena, 2: média, 3: grande janela de visualização

Grade CSS x Flexbox

Quando o Flexbox chegou à cena CSS, gritos de alegria puderam ser ouvidos em todo o mundo; finalmente tivemos um módulo de layout para resolver todas as nossas frustrações de float. Mas esse não foi realmente o caso. O Flexbox funciona melhor para distribuir elementos ao longo de um único eixo; horizontalmente ao longo de uma linha ou verticalmente como uma coluna. Construir uma grade verdadeiramente fluida com Flexbox é difícil.

A grade, no entanto, é destinado à disposição de elementos em dois eixos (ou dimensões); horizontalmente e verticalmente. Neste tutorial vamos usar cada um para o propósito a que se destina, dando-nos uma solução realmente sólida. Vamos começar!

Inspiração para este tutorial

Recentemente, o bbc.co.uk lançou (em beta) sua última iteração, ficando limpa e espaçosa com a interface do usuário do cartão. Ignorando as manchetes miseráveis, isso parece ótimo.

Os cartões superiores são construídos e alinhados na linha com Flexbox, mas vamos expandir o layout usando Grid.

Observação: para acompanhar você precisará de um navegador que suporte Grid. Aqui estão algumas informações para você começar.

Nossa marcação de cartão

Vamos começar com um wrapper para nossa grade

alguns itens de grade para organizar tudo

e algumas âncoras (cada âncora será um cartão):

Coloque quantos cartões quiser; estamos usando sete. Cada um tem uma miniatura

que daremos uma imagem de fundo mais tarde. Então há um

que por sua vez abriga

uma para o autor, e talvez até mesmo um

para mais algumas informações.

Noções básicas de layout de grade CSS

Agora vamos iniciar alguns estilos organizando cada um desses itens em uma grade.

Observação: se esta é sua primeira incursão em “Grid”, você pode querer se atualizar lendo os tutoriais iniciais em Understanding CSS Grid Layout.

Nós iremos primeiro para dispositivos móveis aqui, então os primeiros estilos darão ao nosso wrapper uma largura e o centralizaremos, então defina algumas regras de Grid:

Mais importante, aqui estamos afirmando que nosso .band vai ser display: grid;. Declaramos então grid-template-columns do 1fr, que diz que cada coluna ocupará uma única fração das disponíveis. Declaramos apenas um por enquanto, então cada coluna preencherá toda a largura.

Então declaramos grid-template-rows: auto;. Este é, na verdade, o valor padrão, então poderíamos tê-lo omitido e significa que as alturas das linhas serão determinadas puramente pelo conteúdo.

Por último definimos um grid-gap do 20pxque nos dá nossas calhas de coluna e linha.

Media Query Número Uno

Em viewports mais amplas (500px é completamente arbitrário), alteraremos o grid-template-columns para nos dar duas cartas possíveis por linha. Agora há duas colunas, cada uma sendo uma das duas frações disponíveis.

Media Query Número Dos

Por fim, para telas maiores, usaremos um layout de quatro colunas.

Aqui poderíamos igualmente ter escrito repeat(4, 1fr) ao invés de 1fr 1fr 1fr 1fr. Para obter mais informações sobre como o fr unit funciona, confira CSS Grid Layout: Fluid Columns and Better Gutters.

Então, o que isso nos deu?

Estilizando os cartões

Isso nos deu um layout de grade bastante sólido e, se você é fã de brutalismo, pode querer manter as coisas assim, mas para todos os outros, vamos fazer nossas cartas parecerem um pouco mais com cartas.

Começaremos com isso:

Isso nos dá alguns estilos básicos: um fundo branco, sem sublinhado para o texto, uma cor cinza e um box-shadow para nos dar alguma profundidade.

Em seguida, declaramos que o cartão é display: flex;. Isso é importante – estaremos alinhando o conteúdo do cartão verticalmente, usando o Flexbox. Por isso também afirmamos flex-direction: column; para nos dar o nosso eixo vertical. Por último declaramos min-height: 100%; para que todos os cartões preencham a altura do pai (nosso item de grade). Bom trabalho! Isso nos dá isso:

Estado de foco

Vamos fazer algumas outras melhorias antes de nos aprofundarmos no Flexbox. Adicionar um position: relative; e um transition para que possamos mover o cartão em foco:

Em seguida, ao passar o mouse, levante o cartão levemente e torne a sombra mais pronunciada:

Tipografia

Agora vamos adicionar alguns estilos gerais à tipografia para alterar as cores e o espaçamento.

Aqui está o que você deve ter:

Miniaturas

Cada miniatura será aplicada como uma imagem de plano de fundo, então adicionaremos algumas marcações em geral, como esta:

Agora vamos ter certeza de .thumb divs tenham algumas dimensões, e que as imagens de fundo as preencham corretamente:

Bom trabalho, isso nos dá isso:

Artigo Flexbox

Agora queremos que o nome do autor seja alinhado na parte inferior do cartão, independentemente da quantidade de conteúdo acima dele. É aqui que entra novamente o Flexbox:

Estamos usando a abreviação flex: 1; para declarar que este item flex (ainda é um filho do contêiner flex original) deve crescer para ocupar todo o espaço disponível.

Em seguida, declaramos que o artigo é um contêiner flexível por direito próprio e, novamente, declaramos flex-direction: column; para nos dar distribuição vertical. Por último, justify-content: space-between; afirma que todos os itens flexíveis dentro dele devem ser distribuídos uniformemente ao longo do eixo, com espaçamento igual entre eles.

Isso é ótimo, mas nos dá esses parágrafos estranhos e errantes no meio de nossos cartões.

Para alinhá-los corretamente, vamos adicionar flex-grow: 1; (ou simplesmente flex: 1;) a eles, para que preencham todo o espaço vertical restante, alinhando-se bem no topo.

Melhor!

Alterando a grade CSS

Neste ponto, estamos praticamente encerrados, mas a única coisa que o Grid nos permite fazer agora é alterar completamente o layout, colocando nossos itens de grade onde quisermos e em qualquer tamanho que quisermos. Para esta demonstração, queríamos fazer o primeiro cartão (vamos chamá-lo de nosso “cartão em destaque”) com duas colunas de largura para qualquer coisa que não fosse as menores viewports.

Em nossa primeira consulta de mídia, vamos fazer isso:

Voltando ao nosso tutorial introdutório sobre áreas de grade, aqui estamos dizendo que, além de 500px, o primeiro item deve começar na linha de grade 1 e abranger duas trilhas. O restante dos itens da grade se encaixam automaticamente.

Dentro dessa mesma consulta de mídia, também bati o font-size do título em nosso cartão em destaque.

Conclusão

Este foi um tutorial sólido de CSS Grid e Flexbox; O Grid tratou do nosso layout principal bidimensional, depois o Flexbox tratou da distribuição vertical dos elementos dentro dos nossos cartões. Divirta-se brincando com ele!

Leitura adicional

Deixe um comentário

O seu endereço de e-mail não será publicado.