Diseño de cuadrícula de tarjetas

Parte de la sección Practical Frontend del Journey de HTML de Coddy — lección 27 de 35.

Una Cuadrícula de Tarjetas (Card Grid) es un patrón responsivo común utilizado en sitios de comercio electrónico, portafolios o blogs. Organiza elementos (como productos, artículos o perfiles) en tarjetas espaciadas uniformemente. Cada tarjeta suele contener una imagen, un título, algo de texto y, a veces, un botón o enlace.

Este diseño a menudo se construye con CSS Grid o Flexbox de modo que el número de tarjetas por fila cambie según el tamaño de la pantalla (por ejemplo, 1 columna en móviles, 2–3 en tabletas, 4+ en computadoras de escritorio).

Primero, crea tu estructura HTML para un listado de productos:

<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>

Ahora, añade CSS para que esto sea responsivo:

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

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

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

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

Esto crea una sola columna en móviles, dos columnas en tabletas y tres columnas en pantallas de escritorio.

Desafío

Fácil

Se te proporciona una página HTML para una galería de fotos de viajes. Tu tarea es crear una cuadrícula de tarjetas responsiva que se adapte a diferentes tamaños de pantalla.

Requisitos:

Usa CSS Grid para el diseño.
En móviles (pantallas pequeñas), muestra 1 tarjeta por fila.
En tabletas, muestra 2 tarjetas por fila.
En computadoras de escritorio, muestra 3 o más tarjetas por fila.

Estiliza cada tarjeta con:

Un color de fondo agradable
Esquinas redondeadas

Objetivo: Crear un diseño de galería limpio y moderno que se vea genial en cualquier tamaño de pantalla.

Hoja de referencia

Una Cuadrícula de Tarjetas es un patrón responsivo que organiza elementos en tarjetas espaciadas uniformemente, comúnmente utilizado para productos, artículos o portafolios.

Estructura HTML para una cuadrícula de tarjetas:

<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>
  <!-- Más tarjetas de producto aquí -->
</div>

CSS para una cuadrícula de tarjetas responsiva usando CSS Grid:

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

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

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

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

Esto crea un diseño responsivo: 1 columna en móviles, 2 columnas en tablets y 3 columnas en pantallas de escritorio.

Pruébalo tú mismo

<!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>