Estilización de Cartas con CSS y Responsive Design

Ahora estilizaremos las cards que forman la página de inicio implementando CSS Grid. La o el usuario verá estilos diferentes según el dispositivo desde el que se conecte y aquí podrás identificar sus diferencias.

• Así es la visualización en desde un computador.

• Este es el diseño para móviles

Cómo implementar CSS Grid para centrar varias imágenes

Trabajaremos en el contenedor principal, cuya clase es cards-container. Con display:grid creamos las grillas y luego las columnas con grid-template-columns y usamos la función repeat para que repita nuestro fragmento de código.

Con auto-fill nos aseguramos que la grilla ocupe el 100% del espacio disponible. Después generamos un espacio entre los items con gap. Finalmente, alineamos horizontal y verticalmente empleando place-content.

El CSS quedaría así:

 .cards-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, 240px);
      gap: 26px;
      place-content: center;
    }

Ahora debemos ajustar el tamaño de las imágenes.

 .product-card {
      width: 240px;
    }
    .product-card img {
      width: 240px;
      height: 240px;
      border-radius: 20px;
      object-fit: cover;
    }

Misma clase, estilos diferentes

Queremos que las tarjetas de la página de inicio muestren el precio del artículo y debajo el nombre de este con un tamaño de fuente y color diferentes.

Al lado de ambos debe estar el ícono del carrito de compras.

Para conseguir este resultado debemos:

• Aplicarle FlexBox al contenedor

.product-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 12px;
    }

• Ajustar el tamaño del ícono

.product-info figure {
      margin: 0;
    }
    .product-info figure img {
      width: 35px;
      height: 35px;
    }

• Utilizar nth-child en las etiquetas p

    .product-info div p:nth-child(1) {
      font-weight: bold;
      font-size: var(--md);
      margin-top: 0;
      margin-bottom: 4px;
    }
    .product-info div p:nth-child(2) {
      font-size: var(--sm);
      margin-top: 0;
      margin-bottom: 0;
      color: var(--very-light-pink);
    }

La pseudo-clase nth-child hace posible que le apliquemos estilos diferentes a los párrafos sin necesidad de asignarles una clase a cada uno.

Página de inicio responsive con solo 8 líneas de código

Asignando media queries conseguimos que las cards se vean bien en diferentes pantallas, es decir, desarrollamos una página de incio responsiva.

Como implementamos CSS Grid, lo único que necesitamos es disminuir el tamaño de las imágenes, de la siguiente forma:

    @media (max-width: 640px) {
      .cards-container {
        grid-template-columns: repeat(auto-fill, 140px);
      }
      .product-card {
        width: 140px;
      }
      .product-card img {
        width: 140px;
        height: 140px;
      }
    }

---

---

🎯 ¿Te gustó CSS Grid? Amplía tus conocimientos:

• Curso de CSS Grid básico
• Curso profesional de CSS Grid Layout

---

---

Contribución creada por Guadalupe Monge Barale