No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Página de inicio: CSS

12/22
Recursos

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.
cards.png
  • Este es el diseño para móviles
mobile.png

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:



Contribución creada por Guadalupe Monge Barale

Aportes 111

Preguntas 36

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

🟢 => Aquí es donde podemos sacar provecho de las Variables CSS al almacenar el tamaño fijo de las cards en su contenedor padre, utilizarla en cada propiedad donde se requiera y solo cambiar el valor de esta variable en Responsive.

Realizado!! Lo hice para mi futura venta de bonsai!!

![](

Hay que tener mucho cuidado con el grid-template-columns, yo había puesto "repeat (auto… " con ese espacio entre el repeat y el paréntesis y no me funcionaba. Me costó mucho ver el error pero al final di con él. Así que ya saben… si no lo ponen de esa manera, aunque sea un simple espacio ya no les leerá la propiedad correctamente!

Pueden duplicar texto rápidamente en vscode de la siguiente manera 👉 Seleccionan un texto, mantienen ALT + SHIFT y presionan la flecha de abajo o de arriba dependiendo a dónde quieren que se diriga la copia del texto selecionado 👍 yyy si mantienen presionada esa flecha, se duplicará muchas veces hasta que suelte la flecha 👌

Le agregué lo visual al agregar y quitar el producto con JavaScript


HTML

        <div class="card">
          <figure class="card__image-container">
            <img
              src="./images/chopper-figure.png"
              alt="Chopper's toy"
              class="card__image"
            />
            <div class="center-text hidden">Removed from cart</div>
          </figure>
          <div class="card__additional">
            <div class="card__info">
              <span class="card__price">$ 120,00</span
              ><span class="card__name">Chopper's toy</span>
            </div>
            <img
              src="./images/bt_add_to_cart.svg"
              alt="Shop icon"
              class="card__shopping-icon"
            />
          </div>
        </div>

CSS

:root {
  --very-large: 2rem;
  --large: 1.9rem;
  --medium: 1.7rem;
  --short: 1.6rem;
  --very-short: 1.4rem;
}


.center-text {
  display: inline-block;
  width: calc(var(--card-size) - 30px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 4px 16px;
  border-radius: 10px;
  background: rgba(255, 237, 237, 0.794);
  color: var(--dark);
  font-size: var(--short);
  font-weight: bold;
  text-align: center;
}
.hidden {
  display: none;
}
.card__shopping-icon {
  width: 32px;
  height: 32px;
}

@media screen and (min-width: 600px) {
  .card__shopping-icon {
    width: 40px;
    height: 40px;
  }
  .center-text {
    padding: 4px 36px;
    font-size: var(--very-large);
  }
}

JS

let data = document.querySelectorAll(".card");
data = Array.from(data);
data.forEach(e => {
  e.addEventListener("click", changeShoppingStatus);
});

function changeShoppingStatus() {
  console.log(this);
  let removedText = this.querySelector(".card__image-container .center-text");
  let iconImage = this.querySelector(".card__additional img");
  imageSrc = iconImage.getAttribute("src");
  console.log(removedText);
  console.log(imageSrc);
  if (imageSrc !== "./images/bt_added_to_cart.svg") {
    iconImage.setAttribute("src", "./images/bt_added_to_cart.svg");
    removedText.classList.add("hidden");
  } else {
    iconImage.setAttribute("src", "./images/bt_add_to_cart.svg");
    removedText.classList.remove("hidden");
  }
}

me gusto como quedo :3

Tip de VS Code!
Para no tener que borrar todo el código y luego volver a pegar, como hizo la profe en el minuto 7:20, existe otra solución…

  1. Presionar Control + F
  1. ** Desplegar buscador**
  1. Copiar y pegar códigos
  1. Reemplazar

PD: Se reemplaza todo el código que sea igual en TODO EL ARCHIVO.

**Mis apuntes **
A lo mejor te sirven 😄
Nota: Con Flexbox se realiza la separación y organización de los precios nombres y logos de los productos

  • auto-fill: Para este ejercicio llena de columnas suficientes, es decir adecuara las columnas necesarias, ya que se manejaran en varios dispositivos acompañado de un tamaño el cual será de 240px por tarjeta.
  • object-fit: cover; Al tener la imagen contraída, esta propiedad sirve para tener la imagen con un tamaño tal cual es sin importar su width y height que hemos puesto, es decir no se modificara.
  • gap: Propiedad que permite separar u obtener un espacio entre cada imagen de los productos
  • place-content: center; Alinear todo el grid, es decir permite alinear nuestra container “principal” respecto a la pantalla

Ya voy a empezar a vender mis productos

No dudo que la profesora tenga un buen conocimiento sobre desarrollo frontend, sin embargo, tiene muy malas prácticas.

Quiero pensar que es porque este es un curso muy básico, y como se mencionó, se reutilizará este código en otro curso “avanzado”, pero creo que es mejor aplicar buenas prácticas desde niveles básicos para ir acostumbrando a los estudiantes.

Os recomiendo usar la extensión de Visual Studio Code llamada LIVE SERVER , lo que hace es que cada vez que le deis a guardar código ( ctrl + s ) refresca la pagina abierta y así veis las modificaciones en directo 😄

Este es el resultado del proyecto con las herramientas que aprendimos en la Escuela de Desarrollo Web.
Les dejo el repositorio para que vean la disposición de los archivos y el codigo.
Repo: Yard Sale
Pug

Sass

Mobile

Literalmente adelantándome agregando margins que no surtían efecto y ¡chus! un gap de 26px.

Necesito la clase de grid :v

Este es un ejemplo agregue una pseudo-clase aprendida en el curso anterior haciendo el efecto que cuando el cursor este en la imagen se expanda un poca mas y genere un box shadow también con el icono de agregar al carrito

Estoy demasiado confundido, trato de aplicar todo pero siento que se hizo un desorden innecesario, tener en el mismo archivo el html y el style me está matando, el grid-template-columns simplemente no funciona, tengo todo en una sola columna y el @media tampoco hace efecto. Al haber hecho 15 copias, luego borrarlas y luego volver a realizar las 15 copias debí haber dañado algo en el código.

😃

Una forma de evitar tener que quitar el margen a cada elemento que necesitemos podemos simplemente quitarle los márgenes a todos los elementos que lo traen por defecto y así tener un mejor flujo de trabajo.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Me pareció interesante agregar

.product-info figure img {
cursor: pointer;
}

![](

Agrego mi idea completa de esta clase:

Así va quedando el mío 😄

Faltó estilizar el box shadow del ícono del card:


:root {
 /* Box shadow */
  --boxShadowDark: 0px 1px 14px -5px rgba(35,40,48,0.35);
}
.product-card__cart-icon-container {
      margin: 0;
      width: 3.5rem;
      height: 3.5rem;
      border-radius: 50%;
      -webkit-box-shadow: var(--boxShadowDark);
      -moz-box-shadow: var(--boxShadowDark);
      box-shadow: var(--boxShadowDark);
    }

Para estos casos es increíble usar CSS Grid. No lo conocía, espero terminar la Escuela para pasarme a ver ese curso y profundizar en esta tecnología.

Éxitos a todos

Acá el código de la clase

HTML

<main>
        <section class="main-container">
            <div class="cards-container">
                <div class="product-card">
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
                    <div class="product-info">
                        <div>
                            <p>$120,00</p>
                            <p>Bike</p>
                        </div>
                        <figure>
                            <img src="./Platzi_YardSale_Icons/bt_add_to_cart.svg" alt="">
                        </figure>
                    </div>
                </div>
                <div class="product-card">
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
                    <div class="product-info">
                        <div>
                            <p>$120,00</p>
                            <p>Bike</p>
                        </div>
                        <figure>
                            <img src="./Platzi_YardSale_Icons/bt_add_to_cart.svg" alt="">
                        </figure>
                    </div>
                </div>
                <div class="product-card">
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
                    <div class="product-info">
                        <div>
                            <p>$120,00</p>
                            <p>Bike</p>
                        </div>
                        <figure>
                            <img src="./Platzi_YardSale_Icons/bt_add_to_cart.svg" alt="">
                        </figure>
                    </div>
                </div>
                <div class="product-card">
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
                    <div class="product-info">
                        <div>
                            <p>$120,00</p>
                            <p>Bike</p>
                        </div>
                        <figure>
                            <img src="./Platzi_YardSale_Icons/bt_add_to_cart.svg" alt="">
                        </figure>
                    </div>
                </div>
                <div class="product-card">
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
                    <div class="product-info">
                        <div>
                            <p>$120,00</p>
                            <p>Bike</p>
                        </div>
                        <figure>
                            <img src="./Platzi_YardSale_Icons/bt_add_to_cart.svg" alt="">
                        </figure>
                    </div>
                </div>
                <div class="product-card">
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
                    <div class="product-info">
                        <div>
                            <p>$120,00</p>
                            <p>Bike</p>
                        </div>
                        <figure>
                            <img src="./Platzi_YardSale_Icons/bt_add_to_cart.svg" alt="">
                        </figure>
                    </div>
                </div>
                <div class="product-card">
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
                    <div class="product-info">
                        <div>
                            <p>$120,00</p>
                            <p>Bike</p>
                        </div>
                        <figure>
                            <img src="./Platzi_YardSale_Icons/bt_add_to_cart.svg" alt="">
                        </figure>
                    </div>
                </div>
                <div class="product-card">
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
                    <div class="product-info">
                        <div>
                            <p>$120,00</p>
                            <p>Bike</p>
                        </div>
                        <figure>
                            <img src="./Platzi_YardSale_Icons/bt_add_to_cart.svg" alt="">
                        </figure>
                    </div>
                </div>
                <div class="product-card">
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
                    <div class="product-info">
                        <div>
                            <p>$120,00</p>
                            <p>Bike</p>
                        </div>
                        <figure>
                            <img src="./Platzi_YardSale_Icons/bt_add_to_cart.svg" alt="">
                        </figure>
                    </div>
                </div>
            </div>
        </section>
    </main>

CSS

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

.product-card {
    width: 240px;
}

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

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

.product-info div p:nth-child(1) {
    font-weight: bold;
    font-size: 14px;
    margin: 0 0 4px 0;
}

.product-info div p:nth-child(2) {
    font-size: 12px;
    color: var(--very-light-pink);
}

.product-info figure {
    margin: 0;
}

.product-info figure img {
    width: 40px;
    height: 40px;
} 

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

    .product-card {
        width: 140px;
    
    }

    .product-card img {
        width: 100%;
        height: 140px;
    }
}

si no les esta funcionando Grid-template-column: repeat revisen donde están ubicando las cards, es decir, revisen bien si estan cerrando las etiquetas como debe ser. El uso excesivo de <div> genera este tipo de desorden.

Lo que yo hice fue usar propiedades de hijos directos para así evitarme usar tantas clases y estilos.

  .cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 240px);
  }
  .product-card {
    width: 240px;
  }
  .product-card > img {
    width: 100%;
    border-radius: 20px;
  }
  .product-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

![](

Modo movil

Mi código por si a alguien le puede ayudar:

:root{
    --very-light-pink:#C7C7C7;
    --white:#FFFFFF;
    --text-input-field:#F7F7F7;
    --black:#000000;
    --hospital-green:#ACD9B2;
    --dark:#232830;

    --sm:14px;
    --md:16px;
    --lg:18px;

    --size-card:240px;
    --size-icon:32px;
    --size-scard:140px;
}

.cards-container{
    display:grid;
    grid-template-columns:repeat(auto-fill,var(--size-card));
    gap:26px;
    place-content: center;
}
.product-card{
    width: var(--size-card);
}
.product-card img{
    width: var(--size-card);
    height: var(--size-card);
    border-radius: 20px;
    object-fit: cover;
}
.product-info{
    display: flex;
    justify-content: space-between;
    align-content: center;
    margin-top: 16px;
}
.product-info figure{
    margin: 0;
}
.product-info figure img{
    width: var(--size-icon);
    height: var(--size-icon);
}
.product-info div p:nth-child(1){
    font-weight: bold;
    font-size: var(--md);
    margin: 0px 0px 4px 0px;
}
.product-info div p:nth-child(2){
    font-size: var(--sm);
    margin: 0px;
}
@media (max-width:640px){
    .cards-container{
        grid-template-columns: repeat(auto-fill,var(--size-scard));
    }
    .product-card{
        width: var(--size-scard);
    }
    .product-card img{
        width: var(--size-scard);
        height: var(--size-scard);
    }
}

Yo pensaba que sabía maquetar a un nivel al menos decente hasta que vi esta clase; ahora me doy cuenta de que hacía muchos pasos innecesarios, simplemente wow

Hola a todos, queria aportar que en mi caso me daba error siempre que dejaba un espacio entre la palabra repeat y los parentesis que tenian los valores de grid-temlate-columns.

Asi es como lo escribi para que me funcionara:

grid-template-columns: repeat(auto-fill, 240px) ;

Esta es la manera en que me fallaba:
grid-template-columns: repeat (auto-fill, 240px) ;

En la parte responsive en vez de colocar dentro del cards-container la propiedad

grid-template-columns: repeat(auto-fill,240px);

puse esto 👇🏻

grid-template-columns:auto auto;

y mejoró mucho según las especificaciónes segun el diseño, con la primera propiedad no me salia, espero que sea de aporte para todos, así lo solucioné ✨

asi va quedando el mio

Modo desktop

me hubiera gustado que todas las clases las guiara con el figma o zeplin como debe ser y no al ojo

Visual Studio Code nos ayuda a realizar el duplicado de código con un shortcout que es tener presionado SHIFT + ALT + FLECHA ARRIBA O FLECHA ABAJO. de esta forma automaticamente estaremos duplicando, sin necesidad de estar copiando, buscando donde vamos a pegar, y pegar.

Que wonito uwu

Excelente no me sabía de como utilizar el place-content

Para darle una sola vez el tamaño a los iconos yo le di una clase
<img src=“https:/…400"
alt=”" class=“product-img”>

Al momento de estilizar la imagen se puede evitar estilizar el icono utilizando los selectores combinadores de hijo directo, sería tal que así:
.product-card > img
{

}

Yo lo hice con un poco de javascript para cargar los productos dinámicamente :3

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <title>Yard sale home</title>
    <style>
        :root{
            --white:#f7f7f7;
            --black: #333;
            --very-light-pink: #c7c7c7;
            --hostital-green: #acd9b2;
            --sm: 14px;
            --md: 16px;
            --lg: 18px;
            --xl: 24px;
            --text-input-field: #f0efef;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Quicksand', sans-serif;
        }

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

        .product-card {
            width: 240px;
        }

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

        .product-card div img {
            width: 35px;
            height: 35px;
        }

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

        .product-card div figcaption {
            font-size: var(--sm);
            color: var(--very-light-pink);
            text-align: center;
        }

        .product-card div p {
            font-size: var(--md);
            color: var(--black);
            font-weight: bold;
            text-align: center;
        }

        @media only screen and (max-width: 640px) {
            .main-container {
                display: grid;
                grid-template-columns: repeat(auto-fill, 140px);
                margin: 10px;
                gap: 26px;
            }

            .product-card {
                width: 140px;
            }

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

            .product-card div figcaption {
            font-size: 7;
        }

        .product-card div p {
            font-size: 8;
        }
        }
    </style>
</head>
<body>
    <section class="main-container">

        <template id="card-container">
            <figure class="product-card">
                <img src="" alt="" class="product-img">
                <div class="product-info">
                    <p></p>
                    <figcaption></figcaption>
                    <img src="./icons/bt_add_to_cart.svg" alt="carrito" class="carrito">
                </div>
            </figure>
        </template>

    </section>
    <script type="text/javascript">

        /*capturamos elementos del DOM*/
        const tarjeta = document.querySelector('.main-container');
        const template = document.getElementById('card-container').content;
        const fragment = document.createDocumentFragment();

        /*muchos objetos*/
        const arreglo = [
            {
                img: 'https://images.pexels.com/photos/90946/pexels-photo-90946.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
                text: 'Camara profesional',
                precio: '$100'
            },
            {
                img: 'https://images.pexels.com/photos/2533266/pexels-photo-2533266.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
                text: 'Maquillaje para dama',
                precio: '$20'
            },
            {
                img: 'https://images.pexels.com/photos/248412/pexels-photo-248412.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
                text: 'Lechita pa tu boca',
                precio: '$10'
            },
            {
                img: 'https://images.pexels.com/photos/1279107/pexels-photo-1279107.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
                text: 'Cosa que te espia',
                precio: '$100'
            },
            {
                img: 'https://images.pexels.com/photos/4158/apple-iphone-smartphone-desk.jpg?auto=compress&cs=tinysrgb&h=750&w=1260',
                text: 'Productos apple  variados',
                precio: '$5500'
            },
            {
                img: 'https://images.pexels.com/photos/2783873/pexels-photo-2783873.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
                text: 'Relog michael kors',
                precio: '$1000'
            },
            {
                img: 'https://images.pexels.com/photos/913135/pexels-photo-913135.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
                text: 'Cupcake 💖',
                precio: '$10'
            },
            {
                img: 'https://images.pexels.com/photos/1267338/pexels-photo-1267338.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
                text: 'Se vende hombre trabajador',
                precio: '$100'
            },
            {
                img: 'https://images.pexels.com/photos/376464/pexels-photo-376464.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
                text: 'Pankaques 💜💥',
                precio: '$8'
            },
            {
                img: 'https://images.pexels.com/photos/3338681/pexels-photo-3338681.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
                text: 'Donitas uwu',
                precio: '$1 la unidad'
            },
            {
                img: 'https://images.pexels.com/photos/3587478/pexels-photo-3587478.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260',
                text: 'Se venden audifonos y micro re piolas',
                precio: '$250'
            },
            {
                img: 'https://images.pexels.com/photos/3587478/pexels-photo-3587478.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260',
                text: 'Vendemos servicio de produccion audiovisual',
                precio: '$250 por sesión'
            },
        ];

        /*manipulamos las cards*/
        arreglo.forEach( obj => {
            template.querySelector('img').setAttribute('src',obj.img);
            template.querySelector('img').setAttribute('alt',obj.text);
            template.querySelector('figcaption').textContent = obj.text;
            template.querySelector('p').textContent = obj.precio;

            let clon = document.importNode(template,true);
            fragment.appendChild(clon)
        });

        tarjeta.appendChild(fragment)
    </script>
</body>
</html>

Estos son mis apuntes de esta clase:
.cards-container
display:grid;
grid-template-columns: repeat (auto -fill, 240px);
//Para formar las columnas de las cards
gap:26px; //para espaciarlo
place-content: center; //para que todo se centre.
object-fit: cover; //sirve para colocar la imagen sin modificiar archivos de la imagen.
justify-content: space-between;// para que este cada contenido dentro del contenido principal, uno al lado del otro.
responsive @media(max-width: 640px) - Aquí le cambias el tamaño de los contenedores de productos y recuerda que esta parte del codigo sirve para tener otra imagen en mobile, desde 0-640px.
Y para estilizar los textos o parrafo de cada producto puedes utilizar “nth-child()”.

Les comparto mi resultado de cupcakes

object-ffit:cover = que la imagen sea igual segun el tamaño

Cambie un poco los estilos de la card, me que do asi:

Comparto mis resultados:

Mi ejemplo 😄

Vamos bien

Los valores css para modificar el tamaño de la imagen pueden variar segun las proporciones de la img original

Igualito 😎

Que bueno, dejamos lista nuestra grid de la página de inicio… Sigamos 👏🏻

object-fit: cover
Lo que nos dice es que la imagen (img) tendra su tamaño tal cual independientemente del width y el height que le coloquemos. Basicamente se adecua a ese tamaño que ya tenemos predeterminado.
Espero les sirva, ami si me sirvio mucho.

Interesante la propiedad de object-fit para las imágenes. Aquí la documentación de esa propiedad.

Con poner autofill en grid ya se hace responsive, claro esta ajustando las dimensiones del container, increible.

Excelente!

si a alguien le sirven las imágenes aquí están:

Me complique mucho teniendo el css en el mismo html. Lo saque a un archivo independiente y me ubique mejor. Ya el curso de React lo vuelo a poner en el html si es necesario 👍👍

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --white: #FFFFFF;
            --black: #000000;
            --dark: #232830;
            --very-light-pink: #C7C7C7;
            --text-input-field: #F7F7F7;
            --hospital-green: #ACD9B2;
        }

        body {
            font-family: 'Quicksand', sans-serif;
        }

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

        .product-card {
            width: 240px;
        }

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

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

        .product-info figure {
            margin: 0;
        }

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

        .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);
        }

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

            .product-card {
                width: 140px;
            }

            .product-card img {
                width: 140px;
                height: 140px;
            }
        }
    </style>
</head>

<body>
    <section class="main-container">
        <div class="cards-container">
            <div class="product-card">
                <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
                    alt="">
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Bike</p>
                    </div>
                    <figure>
                        <img src="./icons/bt_add_to_cart.svg" alt="">
                    </figure>
                </div>
            </div>
        </div>
    </section>

</body>

</html>

ojo con el grid si pune auto-fill lo que va alado es un min-content:240px a 2fr atentos xfavor

Profe para que dejar el margin-top a los p, podemos quitar esa linea de codigo y tener algo mas legible no le parece

Para los que tengan problemas con los margins que el navegador agrega por defecto, segun vi es recomendable resetear todos los estilos que da por defecto el naegador

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Si quieren mover líneas de código dentro de otra etiqueta así como lo hace la profe, lo que deben hacer es seleccionar las líneas que quieren mover luego presionan la tecla Alt y mueven con las flechas del teclado

Genial la forma tan sencilla como podemos alinear elementos con la propiedad grid

Para poder estilizar las cards es necesario que los elementos que van a ir dentro de estas estén dentro de dicho contenedor.
Para poder una cantidad de columnas dependiendo del tamaño de la pantalla, se puede emplear la función grid-template-colums: repeat(numero columna, tamaño columnas), el numero de columnas se puede configurar como auto-fill, lo cual permitirá que se llene dependiendo de las cantidad que ocupa.
La función object-fit: cover , permite que la imagen no se vea contraída, sino que esta se ajuste al contenedor.

Así va quedando el mío, traté de hacerlo todo antes de ver los videos, luego cuando los vi apliqué la función repeat para crear las columnas. Al hacerlo no me funcionaba inicialmente hasta que le agregué un width de 100vw al contenedor de cards

Creando un grid container con un numero de columnas dinámico dependiendo de la pantalla donde se muestre.

Mi aporte 😃

Implementado lo usado en la clase para un proyecto del trabajo 😃

Hice una tienda de Aguacates, ¿A quien no le gusta el aguacate?
.

Es mi primera vez usando CSS-Grid, me estaba guiando de la infografía compartida en el curso anterior y no encontraba la propiedad place-content. Peeeero, en la misma guía explican que:
.

place-content sets both the align-content and justify-content properties in a single declaration.

Acá esta mi proyecto ☺️ venta de muebles antiguos.

Seguimos avanzando… Quien lo diría que desde que tomamos el curso de programación básica ya estaríamos realizando esto.

Esto lo necesitaba hace un par de días

object-fit: cover;
  • grid-template-columns: repeat(2, 1fr) es igual a grid-template-columns: 1fr, 1fr que me permite tener dos columnas, pero para que cambie el número de columnas dependiendo del tamaño de la pantalla se coloca grid-template-columns: repeat(auto-fill, tamaño del container individual)

  • .product-info figure img se lee como solo las imagenes que estén dentro de figure dentro de .product-info

  • .product-info div p:nth-child(1) se lee como: el primer parrafo que esté dentro del div que esté dentro de product-info

En el min 5:09 cuando pone un div y luego mueve los p adentro, una forma muy buena de poder identar todo, sobre todo cuando son muchas lineas es:

  1. Primero seleccionamos las lineas que queremos identar y presionamos SHIFT + CTRL + P ó damos click en el menu VIEW y COMMAND PALLETE
  1. Teclamos la palagra WRAP y damos ENTER
  1. Teclamos DIV y damos enter

Todo es esto es lo mismo que usar el SHIFT + FLECHITA ARRIBA O ABAJO, pero cuando con muchas lineas si es mucho mas comodo y exacto.

Después de una ardua investigación de aparatos geeks y sobre todo unos precios inventados pude culminar esta actividad.

.product-info div p:nth-child(1) se lee como el primer p dentro de div que está dentro de product-info

:nth-child() es una pseudoclase.

Yo creía que .product-info era una clase y que dentro de las llaves teníamos el bloque de código…

Uso de object-fit para que la imagen se ajuste con su relación de aspecto 8dimensionado original) sin importar el tamaño del contenedor de la misma

Propiedad auto-fill, se usa para el display:grid, con el fin de definir las columnas de forma automática dentro de un contenedor, y estas columnas se colocan en función del tamaño de la columna (width: 240px para el ejemplo)

Propiedad auto-fiil de display: grid para setear de forma automática la cantidad de columnas a mostrar en el contenedor de la pantalla

cuando usa el

.product-info div p:nth-child(1)

quiere decir el primer P (parrafo) que este dentro de DIV que este dentro de product-info va a tener las clases establecidas en el css, es muy importante lograr entender esa pseudoclase

Así vamos

Este es mi código para que los cuadros de las imagenes sean responsive y se adapten a cualquier resolución y/o cuadricula

<div class="product-card">
                <div class="product-img">
                    <div>
                        <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Producto" />
                    </div>
                </div>
                <div class="product-info">
                    <div>
                        <span class="product-price">$120,00</span>
                        <span class="product-name">Round shelf</span>
                    </div>
                    <div class="button-add-cart">
                        <img src="./assets/icons/bt_add_to_cart.svg" alt="Add to cart" class="add-cart-icon">
                    </div>
                </div>
            </div>
.product-img{
            position: relative;
        }
        .product-img:after {
            content: "";
            display: block;
            padding-bottom: 100%;
        }
        .product-img > div{
            position: absolute;
            border-radius: var(--radius-md);
            overflow: hidden;
            width: 100%;
            height: 100%;
        }
        .product-img > div img{
            width: 100%;
            height: 100%;
            object-fit:cover;
        }

Para que su pagina sea responsive sin la necesidad de usar media querys utilicen estas dos líneas en el contenedor principal o padre y todo el contenido se ira ajustando automáticamente al tamaño de la pantalla, es una de las magias de grid (en los elementos deben tener medidas relativas también para que funcione).

display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

grid-template-columns: repeat(auto-fill, 140px); /* el primer elemento es la cantidad de columnas, el segundo elemento el tamaño de cada columna*/

Hola a todos, en la parte donde la profesora borra los div de clases product-card para sustituirlos por el nuevo div, puedes hacer algo un poco mas rapido, primero debes de copiar la nueva estructura, luego debes seleccionar completo un div de la vieja estructura, dandole a ctrl+D el te elige el prox codigo que es identico al que seleccionastes, con esto puedes darle varias veces a ctrl+D hasta selecionar todos los div antiguos, y luego hacerle un ctrl+F, y lo reemplazas por la nueva estructura ya copiada.

Hola chicxs
En esta parte también quiero comentarles otra forma corta de ajusta el precio, adjunto la captura. No ví necesario usar los nth-child, puede ajustar sin problemas usando margin: 0 y no se destruyó al hacerlo responsive.

![](

Así va quedando el mío

Solo vengo a decir que con gatitos queda hermoso.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
    <title>YardSale</title>
    <style>
    :root {
        --black:#000000;
        --white: #FFFFFF;
        --very-light-pink: #C7C7C7;
        --text-input-field: #F7F7F7;
        --dark: #232830;
        --hospital-green: #ACD9B2;
        --sm: 1.4rem;
        --md: 1.6rem;
        --lg: 1.8rem;
    }
    html {

        font-size: 62.5%;
    }
    body {

        margin: 0;
        font-family: 'Quicksand', sans-serif;
    }
    .cards-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, 240px);/*igual q decir 1fr 1fr) */
        gap: 26px;
        place-content: center; /* para alinear al centro /*/
    }
    .product-card {
        width: 240px;
    }
    .product-card img {
        width: 240px;
        height: 240px;
        border-radius: 20px;

        object-fit: cover; /*imagen se adecua al tamaño*/
    }
    .product-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 1.2rem;
    }
    .product-info  figure {
        margin:0;
    }
    
    .product-info  figure img{
        width: 35px;
        height: 35px;
    }
    .product-info  div p:nth-child(1){
        font-weight: bold;
        font-size: var(--md);

        margin-top: 0;
        margin-bottom: 0.4rem;
    }
    .product-info  div p:nth-child(2){
        color: var(--very-light-pink);
        font-size: var(--sm);

        margin-top: 0;
        margin-bottom: 0;
    }

    @media (max-width:640px) {
        .cards-container {
        grid-template-columns: repeat(auto-fill, 140px);
            }
        .product-card {
            width: 140px;
            }
        .product-card img {
            width: 140px;
            height: 140px;
            }
        .product-info  figure img{
        width: 30px;
        height: 30px;
            }
    }
    </style>
</head>
<body>
    <section class="main-container">
        <div class="cards-container">
            <div class="product-card">
                <img src="https://images.pexels.com/photos/209037/pexels-photo-209037.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""/>
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Cat</p>
                    </div>                
                    <figure>
                        <img src="./assets/icons/bt_add_to_cart.svg" alt="">
                    </figure>
                </div>
            </div>
            <div class="product-card">
                <img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""/>
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Cat</p>
                    </div>                
                    <figure>
                        <img src="./assets/icons/bt_add_to_cart.svg" alt="">
                    </figure>
                </div>
            </div>
            <div class="product-card">
                <img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""/>
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Cat</p>
                    </div>                
                    <figure>
                        <img src="./assets/icons/bt_add_to_cart.svg" alt="">
                    </figure>
                </div>
            </div>
            <div class="product-card">
                <img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""/>
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Cat</p>
                    </div>                
                    <figure>
                        <img src="./assets/icons/bt_add_to_cart.svg" alt="">
                    </figure>
                </div>
            </div>
            <div class="product-card">
                <img src="https://images.pexels.com/photos/416160/pexels-photo-416160.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""/>
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Cat</p>
                    </div>                
                    <figure>
                        <img src="./assets/icons/bt_add_to_cart.svg" alt="">
                    </figure>
                </div>
            </div>
            <div class="product-card">
                <img src="https://images.pexels.com/photos/127028/pexels-photo-127028.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""/>
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Cat</p>
                    </div>                
                    <figure>
                        <img src="./assets/icons/bt_add_to_cart.svg" alt="">
                    </figure>
                </div>
            </div>
            <div class="product-card">
                <img src="https://images.pexels.com/photos/57416/cat-sweet-kitty-animals-57416.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""/>
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Cat</p>
                    </div>                
                    <figure>
                        <img src="./assets/icons/bt_add_to_cart.svg" alt="">
                    </figure>
                </div>
            </div>
            <div class="product-card">
                <img src="https://images.pexels.com/photos/1056251/pexels-photo-1056251.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""/>
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Cat</p>
                    </div>                
                    <figure>
                        <img src="./assets/icons/bt_add_to_cart.svg" alt="">
                    </figure>
                </div>
            </div>
        </div>
    </section>
    
</body>
</html>

Qué buenos trucos css, hay algunos que no sabía cómo aplicar… excelente!

Así va quedando:
Mobile:

Desktop

Creo que si le establecen un margin 0 también en la siguiente clase, el ícono se va a colocar mucho más centrado

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