Estoy trabajando JS y en ello tengo una función que hará que las tarjetas se acomoden en en automático en el html pero estás se formaran dependiendo al tipo al que pertenezcan de cada uno. Trato de hacerlo con grid y ya los separa pero no logro acomodarlos en la misma fila pero diferente producto en cada columna
Hola Jeisy,
Para lograr que las tarjetas se acomoden automáticamente en el HTML dependiendo de sus propiedades, puedes utilizar la propiedad grid-template-columns en CSS. Esta propiedad te permite definir el ancho de las columnas en tu grid.
Por ejemplo, si quieres que tus tarjetas se acomoden en la misma fila pero en diferentes columnas, puedes definir el ancho de las columnas de acuerdo al tipo de producto al que pertenecen.
Aquí tienes un ejemplo de cómo podrías hacerlo:
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}
.tarjeta {
/* Estilos de tus tarjetas */
}
En este ejemplo, la clase .container es el contenedor que contiene todas las tarjetas y tiene la propiedad display: grid para crear un grid. La propiedad grid-template-columns se establece en repeat(auto-fit, minmax(200px, 1fr)), lo que significa que las columnas se ajustarán automáticamente dependiendo del ancho del contenedor y tendrán un ancho mínimo de 200px y un ancho máximo de 1fr (fracción del espacio disponible).
Luego, solo necesitas asegurarte de que cada tarjeta tenga la clase .tarjeta y los estilos correspondientes.
Espero que esto te ayude a lograr el resultado que deseas. Si tienes alguna otra pregunta, no dudes en preguntar.
Si entendi mal lo que quieres hacer, puede volver a preguntar aquí, dando más detalles por favor, estaré contento en ayudar.
¡Saludos!