Layout de Grid de Cards

Parte da seção Practical Frontend do Journey de HTML da Coddy — lição 27 de 35.

Um Grid de Cards é um padrão responsivo comum usado em sites de e-commerce, portfólios ou blogs. Ele organiza itens (como produtos, artigos ou perfis) em cards uniformemente espaçados. Cada card geralmente contém uma imagem, um título, algum texto e, às vezes, um botão ou link.

Este layout é frequentemente construído com CSS Grid ou Flexbox para que o número de cartões por linha mude dependendo do tamanho da tela (ex: 1 coluna no celular, 2–3 no tablet, 4+ no desktop).

Primeiro, crie sua estrutura HTML para uma listagem de produtos:

<div class="product-grid">
  <div class="product-card">
    <img src="product1.jpg" alt="Product 1">
    <h3>Product Name</h3>
    <p>$19.99</p>
    <button>Add to Cart</button>
  </div>
  <!-- Mais cartões de produto aqui -->
</div>

Agora, adicione CSS para tornar isso responsivo:

.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* For tablets and up */
@media (min-width: 600px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* For desktops */
@media (min-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.product-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
}

Isso cria uma única coluna em dispositivos móveis, duas colunas em tablets e três colunas em telas de desktop.

Desafio

Fácil

Você recebeu uma página HTML para uma galeria de fotos de viagem. Sua tarefa é criar uma grade de cartões responsiva que se adapte a diferentes tamanhos de tela.

Requisitos:

Use CSS Grid para o layout.
No celular (telas pequenas), mostre 1 cartão por linha.
Em tablets, mostre 2 cartões por linha.
Em desktops, mostre 3 ou mais cartões por linha.

Estilize cada cartão com:

Uma cor de fundo agradável
Cantos arredondados

Objetivo: Criar um layout de galeria limpo e moderno que fique ótimo em qualquer tamanho de tela.

Folha de consulta

Um Card Grid é um padrão responsivo que organiza itens em cartões uniformemente espaçados, comumente usado para produtos, artigos ou portfólios.

Estrutura HTML para uma grade de cartões:

<div class="product-grid">
  <div class="product-card">
    <img src="product1.jpg" alt="Product 1">
    <h3>Product Name</h3>
    <p>$19.99</p>
    <button>Add to Cart</button>
  </div>
  <!-- More product cards here -->
</div>

CSS para grade de cartões responsiva usando CSS Grid:

.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* For tablets and up */
@media (min-width: 600px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* For desktops */
@media (min-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.product-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
}

Isso cria um layout responsivo: 1 coluna em dispositivos móveis, 2 colunas em tablets e 3 colunas em telas de desktop.

Experimente você mesmo

<!DOCTYPE html>
<html>
<head>
  <title>Card Grid Layout</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f9f9f9;
      margin: 0;
      padding: 2rem;
    }

    h1 {
      text-align: center;
      margin-bottom: 2rem;
      color: #333;
    }

    .gallery-grid {
      gap: 1.5rem;
    }

    .card {
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      overflow: hidden;
      transition: transform 0.3s ease;
    }

    .card:hover {
      transform: scale(1.03);
    }

    .card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    .card h3 {
      margin: 0.8rem;
      color: #444;
    }

    .card p {
      margin: 0 0.8rem 1rem;
      font-size: 0.9rem;
      color: #666;
    }

    /* Tablet: 2 columns */
    @media (min-width: 600px) {
      .gallery-grid {
          
      }
    }

    /* Desktop: 3 columns */
    @media (min-width: 900px) {
      .gallery-grid {

      }
    }
  </style>
</head>
<body>
    <h1>Travel Gallery</h1>

    <div class="gallery-grid">
        <div class="card">
          <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e" alt="Beach">
          <h3>Sunny Beach</h3>
          <p>Relaxing views of golden sand and turquoise waters.</p>
        </div>
    
        <div class="card">
          <img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e" alt="Mountains">
          <h3>Mountain Escape</h3>
          <p>Fresh air and breathtaking peaks for hiking lovers.</p>
        </div>
    
        <div class="card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/View_of_Empire_State_Building_from_Rockefeller_Center_New_York_City_dllu.jpg" alt="City Lights">
          <h3>City Lights</h3>
          <p>A bustling city skyline shining bright at night.</p>
        </div>
    
        <div class="card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/b/be/Hutan_Tangkahan.jpg" alt="Forest">
          <h3>Green Forest</h3>
          <p>Peaceful trails and endless shades of green.</p>
        </div>
    
        <div class="card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/c/c6/Caravan_in_the_desert.jpg" alt="Desert">
          <h3>Desert Adventure</h3>
          <p>Golden dunes stretching far into the horizon.</p>
        </div>
    
        <div class="card">
          <img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470" alt="Lake">
          <h3>Crystal Lake</h3>
          <p>Mirror-like reflections surrounded by mountains.</p>
        </div>
    </div>
</body>
</html>