30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Web Design
  2. CSS Grid Layout
Webdesign

Solucionando Problemas com Grade do CSS e Flexbox: A Interface de Cartão

by
Difficulty:IntermediateLength:MediumLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

O padrão "cartão" (card) tem tido muito sucesso recentemente, mas sua construção ainda é limitada pelo CSS atual. Até agora. Ao combinar Grades do CSS com Flexbox, podemos criar cartões alinhados perfeitamente, responsivos e adaptáveis ao seus conteúdos. Vejamos como!

O Que Iremos Construir

Construiremos essa interface de cartão (veja a página completa para uma ideia melhor):

Em vários pontos de parada o posicionamento do cartão mudará assim:

Breakpoints of CSS Grid layout
resoluções: 1) pequena 2) média 3) grande

Grades CSS x Flexbox

Quando o Flexbox chegou à cena CSS, vários agradeceram aos céus: finalmente tínhamos um módulo de layout para acabar com os problemas de flutuação (float). Mas não foi bem assim. O Flexbox funciona bem para distribuir elementos em um único eixo, seja horizontal (linha) ou vertical (coluna). Construir uma grade realmente fluida com Flexbox é difícil.

A Grade, por outro lado, foi feita para posicionar elementos nos doi eixos (ou dimensões): horizontalmente e verticalmente. Nesse tutorial usaremos os dois para aquilo que foram criados, obtendo uma solução realmente sólida. Comecemos!

Inspiração

Recentemente bbc.co.uk lançou (em beta) sua última iteração, bem limpa e espaçosa com a interface de cartões. Fora os títulos, isso está ótimo.

Os cartões do topo foram criados e alinhados em linha com Flexbox mas expandiremos o layout usando a Grade.

Nota: para acompanhar, é preciso um navegador que suporte a Grade. Veja mais informações sobre isso.

O Código do Cartão

Comecemos com a grade <div class="band">, alguns itens de grade para posicionarmos <div class="item"> e algumas âncoras (cada uma delas será um cartão):

Coloque quantos cartões quiser: estamos usando sete aqui. Cada um tem uma minitatura <div class="thumb"> a qual daremos um plano de fundo mais tarde. E temos um <article> que guarda um <h1>, um <span> para o autor e até um <p> caso tenha mais informações.

Básico das Grades

Agora, usemos alguns estilos, arranjando cada um dos items em uma grade.

Nota: se for sua primeira mexida com Grades, talvez queira inteirar-se lendo a série inicial de tutoriais: Entendendo Layout em Grade do CSS.

Começaremos com o mobile, assim o recipiente receberá os primeiros estilos para largura, centralização e regras de Grade:

O mais importante, criamos a grade em .band com display: grid;. Ao declaramos grid-template-columns de 1fr, dizemos para cada coluna tomar uma fração igual do espaço disponível. Apenas declaramos uma, por hora, assim cada coluna preencherá toda a largura.

E adicionamos grid-template-rows: auto;. Esse é o valor padrão e poderíamos omitir a propriedade. Com esse valor, as alturas serão determinadas puramente pelo conteúdo.

Por último, definiremos grid-gap de 20px, dando-nos o espaçamento entre as colunas e linhas.

Consultas de Mídia "Numero Uno"

Em resoluções mais largas (500px é totalmente arbitrário), mudaremos grid-template-columns para termos até dois cartões por linha. Agora, temos duas colunas, cada uma tomando 1 fração d'um total de duas frações.

Consultas de Mídia "Numero Dos"

Por último, para resoluções maiores, teremos quatro colunas.

Aqui, poderíamos ter escrito, também, repeat(4, 1fr) ao invés de 1fr 1fr 1fr 1fr. Para mais informações sobre a unidade fr, leia: Layout em Grade do CSS: Colunas Fluidas e Espaçamento Melhorado.

E o que isso nos gerou?

Estilizando os Cartões

Deu-nos um layout em grade bem sólido e, caso seja fã do brutalismo, pode deixar as coisas assim, mas para as outras pessoas, é bom melhorarmos a apresentação dos cartões.

Começaremos com isso:

Isso nos dá os estilos básicos: plano de fundo branco, texto sem sublinhado, cor cinza e uma box-shadow bacana para gerar profundidade.

Depois, atribuímos dispaly: flex; ao cartão. Isso é importante–alinharemos o conteúdo dos cartões verticalmente, com Flexbox. Assim, também atribuiremos flex-direction: column; para termos o eixo vertical. Por último, declaramos min-height: 100%; para todos os cartões preencherem a altura do pai (item da grade). Bom trabalho! Agora temos:

Estado Sobreposto

Façamos dois outros aprimoramentos antes de continuar com Flexbox. Adicione position: relative; e transition para que movamos o cartão ao sobrepolo com o mouse.

Então, ao sobrepor o mouse, mova um pouco o cartão e torne a sombra mais acentuada:

Tipografia

Agora, adicionaremos alguns estilos gerais para a tipografia, alterando as cores e espaçamento.

Eis o que deveríamos ter:

Miniaturas

Cada miniatura será aplicada como imagem de plano de fundo, logo adicionaremos códigos para isso, assim:

Agora, garantiremos que as divs .thumb possuem dimensões e que as imagens de planos de fundo preenchem apropriadamente.

Bom trabalho. Com isso obtemos:

Artigo Flexbox

Agora, queremos o nome do autor alinhado ao rodapé do cartão, independente de quanto conteúdo tiver acima dele. É aqui que o Flexbox entra em ação:

Usamos a versão compacta flex: 1; para dizer que esse item flex (que ainda é um filho do container flex original) deve crescer para tomar todo o espaço disponível.

Então, declaramos que o artigo também é um artigo flex em si e, de novo, declararemos flex-direction: column; para obter distribuição vertical. Por último, justify-content: space-between; diz que todos os items flex internos deveriam espalhar-se pelo eixo, com espaçamento igual entre eles.

Tudo ótimo, mas o que obtemos são esses parágrafos estranhos no meio dos nossos cartões.

Para alinhá-los apropriadamente, adicionemos flex-grow: 1; (ou apenas flex: 1;) neles, para que preencham todo o espaço vertical restante, alinhando-se ao topo.

Bem melhor!

Alterando a Grade

Nesse ponto, temos quase tudo pronto, mas algo que a Grade permite fazer agora é mudar completamente o layout ao posicionar nossos items de grade onde quisermos e em qualquer tamanho que quisermos. Para essa demonstração, queremos que o primeiro cartão (chamemo-no de "cartão destaque") tenha largura de duas colunas em todas as resoluções exceto a menor.

Em nossa primeira consulta de mídia, façamos isso:

Voltando ao tutorial introdutório sobre grades, aqui dizemos que além dos 500px o primeiro item deve começar na linha de grade 1 e tomar duas trilhas. O resto dos itens de grade preencherão o resto automaticamente.

Ainda na mesma consulta de mídia, também aumentamos font-size do cabeçalho do nosso cartão destaque.

Conclusão

Esse foi um ótimo exercício em como usar Grades com Flexbox: a Grade lidou com o layout bi-dimensional e o Flexbox lidou com a distribuição vertical dos elementos dentro dos cartões. Divirta-se brincando com ele!

Leitura Adicional

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.