Cursos Empresas Blog Live Conf Eventos Precios

0:0013:39

Recursos

Resumen

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:

Contribución creada por Guadalupe Monge Barale

Estilización de Cartas con CSS y Responsive Design

Curso Práctico de Frontend Developer

Clase 12 / 22

Ver clases

Estilización de Cartas con CSS y Responsive Design

Curso Práctico de Frontend Developer

Clase 12 de 22

Clase 12 / 22

Estilización de Cartas con CSS y Responsive Design

Curso Práctico de Frontend Developer

Clase 12 / 22

Ver clases

Comentarios (160)160 comentarios

Jose Guerrero

Hace 5 años

🟢 => 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.

Luis Alejandro Vera Hernandez

Muy buen dato, gracias

Ricardo Mazuera

Excelente aporte compañero!!!. Lograste que se requirieran usar menos lineas de código.

Fabricio González Guasque

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

![](

Jorge Ayala

Muy bonito

Sebastián Arredondo Posada

Good job man! 👍🏻

Oscar Rabadan Martinez

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!

Juan Henao

Crack!!

Cesar Ivan Romero Martinez

Hace 4 años

no me lo reconoce de ninguna forma con espacio sin espacio , incluso ya lo copie de varios compañeros que subieron el mismo codigo y nada , solo sucede con grid-template-columns todo lo demas si me lo estiliza

Cesar Hernández Ramírez

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 👌

David Moina

Gran aporte, mucho mas fácil. Gracias compañero!! 😊

Thanks for this tip 😉

Mauricio Carrasco

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

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

Rolando Mamani Salas

te quedo muy bonito

Kyb3r Cipher

Hace 2 años

Te quedo muy bien

Mauricio Alfredo Valetti

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

Presionar Control + F

** Desplegar buscador**

Copiar y pegar códigos

Reemplazar

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

Misael Gomez

Gracias por hacer un mini tutorial, es de mucha ayuda! :)

muchas gracias !

Sharon Guiselle Corpas Avendaño

me gusto como quedo :3

Carmen Álvarez M.

Genial!!

quedo muy bonito !

Cristian David Merchan Vega

**Mis apuntes ** A lo mejor te sirven :D 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

Marcial Igme

Ya voy a empezar a vender mis productos

Buena esa!!!. Por orden en la web y experiencia de usuario sería bueno que estandarizaras el tamaño de las imágenes. No necesariamente cuadradas como las de la profe, pero si dos o tres tamaños en cierto orden.

Mario Pace

El es precio es un riñon jajaja

Erwin Frias

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.

Fabiola Jessica Huancollo Chambi

¿Qué malas prácticas son esas?

Harold

Si. normalmente en buenas prácticas de programación aplica el DRY, pero en html y css no se puede crear un menú de varios items así. Pero siento que la profesora se enredó un mucho al empezar a copiar un elemento y repetirlo 15 veces a la mitad de la clase. Apenas ella hizo eso ya sentía que iba a ser un problema arreglar el html luego, era preferible primero trabajar 1 solo item, terminarlo, y luego empezar a copiarlos.

JUAN JOSE BAUTISTA ANACONA

Buen día

Tengo una duda. Manejo VS CODE y en el apartado (auto-fill, 240px) Especialmente el auto-fill no me coge como código ¿será algún complemente de VS code? O algo estoy realizando mal comparto apartado del código.

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

Héctor Eduardo López Carballo

Hola!

Podrías compartir una captura de lo que te muestra? A lo mejor tienes una extensión que interfiere con eso.

no es que no me muestra nada. Solo el parámetro o el auto-fill se nota que solo coge el auto pero no el fill y al momento de ver en el proyecto no realiza ninguna cambio.

Claudiu Rad

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

Camilo Carrillo

Recuerden! Deben abrirlo con live server, sino no les funciona!

Piky Ramos

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

Usuario anónimo

User

SASS lo es todo en esta vida.

Andres López

Si, hay curso de SASS (entre otros preprocesadores) en Platzi: https://platzi.com/cursos/preprocesadores/ Antes habia uno de solo SASS pero lo retiraron

Rodrigo Ramos Xochiteotzin

Acá el código de la clase

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

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

Alex Mendez

no se puede trabajar con flex solamente o solo usamos grid por facilidad

Raul Romero

Hola @alex-mendez982 CSS Grid es mejor para la construcción general de nuestra página, ya que es más fácil modelar nuestra plantilla, y se pueden crear diseños más asimétricos y peculiares. CSS Grid en diseños con filas y columnas. Flexbox es mejor alineando el contenido dentro de los diferentes elementos de la web.

Flex es mas para arreglar cositas pequeñas, los detalles como dice la profe

Miguel Cabrera

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

Helen Andrea Urquijo Herrera

Andrés Felipe Martínez Vargas

Que talentooo 😁👌

Carlos Mendieta

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.

Juan Camilo Morales

Tampoco me sirve el grid template column, encontraste solucion?

Daniel Subirá López

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

Necesito la clase de grid :v

Johan Arena

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

Recursos

Resumen

Estilización de Cartas con CSS y Responsive Design

Estilización de Cartas con CSS y Responsive Design

Estilización de Cartas con CSS y Responsive Design

Progreso del curso

Introducción

Layout y componentes

Maquetación responsiva: pantallas de autenticación

Maquetación responsiva: vistas principales

Próximos pasos

Estilización de Cartas con CSS y Responsive Design

Estilización de Cartas con CSS y Responsive Design

Recursos

Resumen

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

Misma clase, estilos diferentes

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

Comentarios

Recursos

Resumen

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

Misma clase, estilos diferentes

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

Comentarios