2 maneiras de criar uma interface do usuário de cartão de rolagem (Flexbox e CSS Grid)

Vamos criar isso de duas maneiras diferentes para que você tenha um bom entendimento de várias propriedades CSS. Você pode usar esse padrão de interface do usuário em diferentes partes de seus sites, por exemplo:

• Para apresentar os membros da equipe
• Para mostrar postagens/produtos em destaque ou mais recentes
• Para listar depoimentos

Como acontece com qualquer novo recurso CSS, você pode ver inconsistências dependendo do navegador usado para verificar as demonstrações. Por exemplo, o Chrome mostrará nossa barra de rolagem personalizada, enquanto o Firefox ainda mostrará a barra de rolagem padrão. Tenha isso em mente e verifique caniuse.com para o suporte do navegador de vários recursos de front-end.

Nossa interface do usuário do cartão de rolagem

Confira a primeira versão do nosso componente finalizado que usa flexbox para o layout da grade:

E aqui está a segunda versão do nosso componente finalizado que usa CSS Grid para o layout da grade:

Tente rolar cada um para que metade de um cartão fique visível na borda – veja como o comportamento de rolagem automaticamente encaixa os cartões na posição!

1. Determine o layout

Vamos começar discutindo os requisitos do projeto.

Precisamos criar um layout de cartão rolável adaptável. O número de cartões que aparecerão na visualização mudará dependendo do tamanho da janela de visualização.

Aqui está uma tabela útil onde registramos como nosso layout (grade) deve se comportar em diferentes telas:

Para visualizar as coisas, on telas extra pequenas, o layout ficará assim:

On telas pequenas, ficará assim:

On telas médias, terá esta aparência:

Por fim, em telas grandes, ficará assim:

Também precisamos bloquear (encaixar) os cartões visíveis no lugar, cada vez que um usuário terminar de rolar. Desta forma teremos sempre um número exato de cartas em vista e evitaremos ver apenas uma parte das outras cartas; a posição de rolagem mudará imediatamente para o ponto inicial do cartão mais próximo. Este salto produzirá um efeito em que cada conjunto de cartas visíveis se comportará um pouco como slides de carrossel.

Esse efeito será ainda mais óbvio em telas de dispositivos móveis, onde apenas um único cartão aparece e, à medida que você desliza, o cartão adjacente desliza.

Para entender melhor o que estou descrevendo, veja o vídeo a seguir, ou melhor ainda, confira as demos com vários tamanhos de tela:

2. Definir a marcação HTML

Usaremos uma estrutura bem direta para isso: um elemento container com um título e uma lista de cartões dentro dele. Cada cartão conterá um título, conteúdo e link. Vamos envolver esses elementos em torno de alguns extras divs para garantir que o botão de link sempre fique na parte inferior do cartão.

Aqui está a marcação:

  
...
  

    

      

        
...
        
...
      
      

        ...
      
    
   
  

3. Especifique os estilos principais

Para construir o layout desejado e principalmente o grid, podemos utilizar diferentes técnicas de layout. Começaremos com uma abordagem flexbox e depois continuaremos com uma CSS Grid.

Todos os cartões ficarão dentro de um contêiner que terá uma largura de 1400px.

Interface do usuário do cartão Flexbox

As principais coisas sobre o invólucro do cartão:

• Será um contêiner flexível.
• Terá overflow-x: scrollpois queremos rolar horizontalmente para ver todos os cartões.
• Precisaremos de uma barra de rolagem personalizada que corresponda às cores da nossa marca, supondo que a cor primária da nossa marca seja vermelho escuro.

As principais coisas sobre cada cartão:

• Será um contêiner flexível com flex-direction definido como column. Isso significa que os itens flexíveis serão empilhados verticalmente ao longo do eixo principal.
• Como dito anteriormente, o botão do link deve estar sempre na parte inferior, independentemente do título e do conteúdo de cada cartão. Então, para alcançar essa uniformidade, forneceremos o wrapper do link pai margin-top: auto.
• Nós vamos dar-lhe flex-shrink: 0 pois não queremos encolher e usar o flex-basis propriedade para definir sua largura. o flex-grow propriedade não nos interessa, então vamos manter o padrão 0 valor. A largura dependerá do tamanho da tela e da margem entre os cartões adjacentes. Vamos explicar.

Em telas extra pequenas, todos os cartões terão uma largura igual à largura do pai.

Para calcular a largura do cartão em telas pequenas, faremos estes cálculos:

• Espaço total entre os cartões visíveis = 1 * 20px => 20px. Omitimos o espaço da última carta.
• A largura de cada cartão = calc(50% – 10px). O valor 10px derivado do cálculo: Espaço total entre cartões visíveis / Número de cartões visíveis (20px / 2 => 10px).

Para calcular a largura do cartão em telas médias, faremos estes cálculos:

• Espaço total entre os cartões visíveis = 2 * 30px => 60px. Omitimos o espaço da última carta.
• A largura de cada cartão = calc(calc(100% / 3) – 20px). O valor 20px derivado do cálculo: Espaço total entre cartões visíveis / Número de cartões visíveis (60px / 3 => 20px).

Para calcular a largura do cartão em telas grandes, faremos estes cálculos:

• Espaço total entre os cartões visíveis = 3 * 40px => 120px. Omitimos o espaço da última carta.
• A largura de cada cartão = calc(25% – 30px). O valor 30px derivado do cálculo: Espaço total entre cartões visíveis / Número de cartões visíveis (120px / 4 => 30px).

Para bloquear a janela de visualização em determinados elementos após o término da rolagem, usaremos o recurso CSS Scroll Snap. Dito isto:

• O invólucro do cartão receberá o scroll-snap-type: x mandatory valor da propriedade. Isso garante que o navegador se encaixe em um ponto de encaixe assim que a rolagem do usuário terminar.
• Cada cartão receberá o scroll-snap-align: start valor da propriedade. Isso determina a parte do cartão em que a rolagem deve parar. Tente dar outro valor como center para ver a diferença.

Tente também rolar sem essas duas propriedades habilitadas para ver a diferença.

Aqui estão os estilos mais importantes:

/*CUSTOM VARIABLES HERE*/

.cards {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

.card {
  display: flex;
  flex-direction: column;
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.card .card-link-wrapper {
  margin-top: auto;
}

.cards::-webkit-scrollbar {
  height: 12px;
}

.cards::-webkit-scrollbar-thumb,
.cards::-webkit-scrollbar-track {
  border-radius: 92px;
}

.cards::-webkit-scrollbar-thumb {
  background: var(--darkred);
}

.cards::-webkit-scrollbar-track {
  background: var(--thumb);
}

@media (min-width: 500px) {
  .card {
    flex-basis: calc(50% - 10px);
  }

  .card:not(:last-child) {
    margin-right: 20px;
  }
}

@media (min-width: 700px) {
  .card {
    flex-basis: calc(calc(100% / 3) - 20px);
  }

  .card:not(:last-child) {
    margin-right: 30px;
  }
}

@media (min-width: 1100px) {
  .card {
    flex-basis: calc(25% - 30px);
  }

  .card:not(:last-child) {
    margin-right: 40px;
  }
}

E a demonstração relacionada do CodePen, onde você pode examinar todos os estilos:

IU do cartão de grade CSS

Nesta segunda abordagem, criaremos o mesmo layout de cartão, mas com CSS Grid.

Aqui estão as modificações que aplicaremos:

• O invólucro do cartão será um contêiner de grade.
• Colocaremos todos os itens da grade como colunas graças ao grid-auto-flow: column valor da propriedade.
• Nós vamos usar o grid-auto-columns propriedade para definir o tamanho das colunas. O tamanho da coluna dependerá do tamanho da tela e do espaço entre cada coluna. Os cálculos são exatamente os mesmos que fizemos anteriormente com o flex-basis propriedade. Assim, os valores da grid-auto-columns propriedade irá corresponder aos valores dos acima mencionados flex-basis propriedade em qualquer tamanho de tela.

Aqui estão os estilos modificados:

/*CUSTOM VARIABLES HERE*/

.cards {
  display: grid;
  grid-auto-columns: 100%;
  grid-column-gap: 10px;
  grid-auto-flow: column;
}

@media (min-width: 500px) {
  .cards {
    grid-auto-columns: calc(50% - 10px);
    grid-column-gap: 20px;
  }
}

@media (min-width: 700px) {
  .cards {
    grid-auto-columns: calc(calc(100% / 3) - 20px);
    grid-column-gap: 30px;
  }
}

@media (min-width: 1100px) {
  .cards {
    grid-auto-columns: calc(25% - 30px);
    grid-column-gap: 40px;
  }
}

E, novamente, a demonstração do CodePen relacionada, onde você pode examinar todos os estilos:

Conclusão

Neste tutorial, examinamos duas maneiras de criar uma interface do usuário de cartão de rolagem horizontal. Ao longo do caminho, passamos por vários recursos modernos de CSS. Isso lhe dará alguns novos conhecimentos e espero que tenha inspirado você a criar layouts de interface do usuário que aproveitam algumas das coisas que abordamos aqui.

Se você puder pensar em outra maneira de construir este layout, não se esqueça de compartilhe conosco! Como sempre, muito obrigado por ler!

Tutoriais Flexbox no Tuts+

O Flexbox é uma parte notoriamente complicada do CSS, mas não se preocupe, nós cuidamos de você!