Como criar um layout de cartão usando layout de grade CSS

Nota do editor: esta postagem de convidado foi escrita por Abbey Fitzgerald, uma engenheira de software UX e web designer que adora a arte de criar código.

Os layouts de grade CSS estão mudando a maneira como os web designers trabalham, permitindo uma maneira mais eficiente de dispor o conteúdo do site.

Há muito esperado, mas finalmente essa abordagem realmente decolou e, em muitos casos, está em produção. Ele revolucionou a forma como os sites são projetados e, uma vez que os designers peguem o jeito, ele dará mais flexibilidade aos layouts da web.

Se você tentou criar com CSS Grid e verificou tutoriais na web, pode ter encontrado informações relacionadas a uma abordagem geral de layout. Coisas como: cabeçalho, conteúdo, rodapé, etc.

No entanto, o CSS Grid também pode ser útil para outros detalhes do site, como cartões. Os layouts de cartão são uma maneira comum de exibir conteúdo e podem ser criados com eficiência com o CSS Grid. Ao usar esse método, as áreas de conteúdo do cartão são facilmente repetíveis, podem ser visualizadas em vários tipos de dispositivos diferentes e o tamanho é facilmente controlado.

Ferramentas de layout de grade CSS

À medida que avança, você desejará inspecionar as coisas na página. O Firefox tem ótimas ferramentas de desenvolvedor para ver áreas de grade. Usando as ferramentas de desenvolvedor do Firefox, você pode ver uma sobreposição que contorna a grade. O Firefox Developer Edition também tem essa capacidade.

Selecione a grade de sobreposição que deseja exibir (dependendo do seu design, pode haver mais de uma). As configurações de exibição de grade permitem que você dê uma olhada mais de perto, exibindo o número da linha, os nomes das áreas e como deseja que as linhas se estendam. Isso será útil enquanto você projeta.

Cartões simples com layout de grade CSS

Se você é novo no CSS Grid, você vai querer atualizar o básico e criar um CSS Grid Layout simples. Os cartões são uma ótima maneira de exibir conteúdo, bem como um elemento de interface do usuário interessante e intuitivo de usar. Eles também fornecem um ótimo formato para os usuários verificarem rapidamente o conteúdo e se envolverem com o que mais lhes interessa. Os cartões também permitem que os designers formatem o conteúdo de maneira visualmente atraente, com ótimas imagens, conteúdo introdutório, links e muito mais!

Cartões e layout geral da página

Como um aparte, é importante saber que o CSS Grid não precisa ser usado em um layout de página inteiro. As grades podem ser usadas em determinadas áreas da página, se necessário. Como este é um tutorial sobre layouts de cartão, uma abordagem de grade pode ser usada exclusivamente aqui, mesmo que o restante da página não utilize CSS Grid. Desde que a área da grade esteja definida e display: grid; é declarado no wrapper, essa abordagem pode ser usada.

Trabalhando com um número definido de cartões

Em alguns casos, é fácil planejar um determinado número de cartões. Com uma quantidade definida de conteúdo, o número de cartões permanecerá o mesmo. Por exemplo, pode haver quatro cartas que explicam as ofertas de negócios, com cada oferta em seu próprio cartão.

Para este exemplo (e os outros), todos os itens .card estão dentro de um elemento contêiner .cards . Para conseguir isso, é bem simples.

 [css] .cards { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; grid-gap: 1rem; }   .card { border: 2px solid #e7e7e7; border-radius: 4px; padding: .5rem; } [/css]

É importante exibir o valor de .cards na grade. Sem isso, as áreas de grade não podem ser criadas. O próximo passo é definir as grid-template-columns e escolher o estilo. O estilo real do cartão será declarado com uma classe de .card .

Neste exemplo, você verá várias tags de artigo com a classe .card . Veja no Codepen.

Repita para definir o número de cartões

É aqui que as cartas começam a tomar forma. Para criar uma quantidade fluida de colunas por linha, repeat é usado com a função repeat() . Esta função recebe dois argumentos: o número de vezes a repetir e o valor a repetir.

Por exemplo, grid-template-columns: repeat(3, 200px); calcula para grid-template-columns: 200px 200px 200px; .

Unidade fracionária

Você verá que o código de exemplo usa um "fr". O que é isso exatamente? Esta unidade de medida tornou-se popular com o CSS Grid. Fr significa “unidade fracionária” e 1fr ocupa 1 parte do espaço disponível. Isso ajuda a simplificar os cálculos de espaço.

As unidades fracionárias podem ser usadas sozinhas ou permitem que você especifique uma largura de 1fr e também pode adicionar elementos filhos. Múltiplos fr serão igualmente compartilhados entre todos os elementos filho.

Diferentes unidades fracionárias podem ser especificadas. Por exemplo, quando as colunas da grade são 1fr 2fr 1fr , duas unidades fracionárias ocupam o dobro do espaço de uma unidade fracionária.

Repita para um número dinâmico de cartas

Em alguns casos, você pode não saber o número de cartões necessários, portanto, planejar um número definido não funcionará. A mesma abordagem será adotada como foi com a repetição, mas há a opção de ajustar quantas forem necessárias com o preenchimento automático.

 [css] grid-template-columns: repeat(auto-fill, 250px); [/css]

As declarações de largura são necessárias além do auto-fill . Lembre-se, com um valor de px, pode haver espaço à direita quando não houver espaço suficiente para o cartão caber, mas isso não precisa ser o caso, como você verá um pouco mais tarde.

Minmax para mais controle sobre a largura do cartão

Minmax é a solução perfeita, já que uma unidade fracionária por si só daria largura total aos cartões. Adicionar repeat e minmax à declaração de estilo eliminará o possível espaço vazio e os cartões parecerão mais fluidos.

 [css] grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); [/css]

As colunas sempre caberão na grade e os cartões terão pelo menos 200px. Quando o espaço mínimo não se encaixa perfeitamente no espaço, é aqui que a largura máxima entra em jogo. Quando outro cartão de 200px de largura não couber, os outros cartões serão maiores que 200px, então eles esticarão para preencher a linha com mais espaço e serão distribuídos igualmente. [ID do artigo=”21612″ alinhar=”direita”]

Móvel

Já que os menores e maiores cartões foram planejados, este é um bom momento para falar sobre mobile. Os cartões funcionam bem em dispositivos maiores e menores porque o conteúdo está em partes digeríveis e os cartões podem ser facilmente dimensionados para cima e para baixo. O CSS Grid ajuda a criar uma ótima experiência móvel e, em alguns casos, é muito mais fácil do que ter uma consulta de mídia separada.

Neste exemplo, os cartões precisam ser reduzidos para caber em dispositivos móveis e maiores para ocupar uma fração do espaço disponível, para que apareçam em largura total em um dispositivo menor, sem a necessidade de consulta de mídia separada:

 [css] grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); [/css]

A largura mínima do cartão é 300px. Todos os cartões de 300px que couberem aparecerão na linha. Quando o dispositivo é muito pequeno, há uma boa chance de não haver espaço disponível para dois cartões seguidos. É quando o 1fr entra em jogo. A unidade fracionária é ótima para designs responsivos. Quando dois dos cartões de 300px não cabem, é aqui que a visualização móvel se torna muito aparente. Quando 1fr for declarado como a largura máxima, um único cartão ocupará todo o espaço disponível e eles serão empilhados uns sobre os outros.

Espaço na Grade

Agora que a largura dos cartões está estabelecida, a decisão de ter espaço entre eles precisa ser tomada. Essa propriedade está disponível em contêineres de grade e facilita a criação de calhas no projeto. Grid-column-gap cria o espaço entre cada cartão. Quando você vê grid-gap , isso se refere à abreviação de grid-row-gap e grid-column-gap . Grid-row-gap é o espaço na parte superior e inferior do cartão, grid-column-gap é o espaço à esquerda e à direita do cartão.

Recursos de layout de grade CSS

Quando se trata de CSS Grid Layouts, há muito o que aprender e muitas possibilidades. A melhor maneira de aprender sobre CSS Grid Layout é fazer algumas leituras e experimentos adicionais. Existem muitos recursos excelentes por aí, mas aqui estão alguns para você começar:

• Grade por exemplo
• Curso CSS Grid Layout de Wes Bos
• Mozilla Introdução ao CSS Grid