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.
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.
🟢 => 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.
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 👌
**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
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
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.
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.
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:autoauto;
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é ✨
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.
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
{
…
}
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()”.
Para posicionar las cards en cuadriculas, usé flex en lugar de grid, con flex-wrap: wrap. Considero que es una forma corta de lograr el mismo efecto de responsive. Esto me ahorró algunas líneas de código adicionales que la profe puso en esta clase.
```html
<html lang="en">
<head>
<meta charset="UTF-8">
<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:[email protected]&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/6-Home.css">
<title>YardSale-Home</title>
</head>
<body>
<section class="main-container">
pueden agregar cursor: pointer; dentro de .product-card img para que cambie el cursor por la manita.
```js
.product-card img{
width: 240px;
height: 240px;
border-radius: 20px;
object-fit: cover;
cursor: pointer;
}
```
Hola, se que no estamos viendo cosas de Javascript en esta etapa del curos, para repetir elementos yo hice una pequeña trampilla y es lo siguiente,.. en la sección head agregue estos dos script, el primero en el head y el segundo al final de todo. recomendación importante no usen un numero muy alto o el navegador se va a poner lento, con 5 esta bien
```js
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script>
for (let index = 0; index < 5; index++) {
$( ".product-card" ).clone().appendTo( ".cards-container" )
}
</script>
```
Dejo el link de mi maquetado. Implementé la etiqueta `<template>` para maquetar cada tarjeta basado en un array desde JavaScript
[LauMartinez-Code/yard-sale-FE at ac7e6a0a3b97364bec3b19df5f191e4e69e6727c (github.com)](https://github.com/LauMartinez-Code/yard-sale-FE/tree/ac7e6a0a3b97364bec3b19df5f191e4e69e6727c)
La propiedad `place-content` en CSS es una propiedad abreviada para las propiedades `align-content` y `justify-content`. Se utiliza en los layouts de cuadrícula (grid) y flexbox.
Por ejemplo, si tienes `place-content: center center;`, está centrando el contenido tanto horizontal como verticalmente.
Se complica seguirla, pienso que no necesita ir tan rápido y por ello improvisa lo del minuto 7:20, hace que uno se pierda, no lo encuentro nada didáctico
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.
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 👍👍
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
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
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
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.
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
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)
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
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).
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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?