0

Estoy aprendiendo grid, tengo un problema para mantener el tamaño adecuado de un item cuando es buscado, siempre estoy mostrando 4 productos, que se acoplan perfectamente, este es el código:

.between {
  display: flex;
  justify-content: space-between
}

.flex {
    display: flex;
    justify-content: center;
}

#products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  column-gap: 12px;
  row-gap: 15px;
  padding: 0 1.5%;
  position: relative;
}

.product {
  box-shadow: 0 3px 9px 2px rgba(0, 0, 0, .1);
}

.product img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.product-text-box {
  padding: 1.5% 5% 5%;
}

#publication-date {
  text-align: right;
  font-size: 13px;
  color: rgba(0, 0, 0, .5);
  font-family: "Lato", sans-serif;
}

.product-text-box h4 {
  font-size: 19px;
  font-family: 'Alegreya Sans', sans-serif;
}

.product-text-box>span {
  display: block;
  word-break: break-all;
  margin: 10px 0;
  font-size: 15px;
  font-family: 'Lato', sans-serif;
}

.product-text-box i {
  margin-right: 5px;
}

.product-text-box .flex span {
  font-size: 13px;
  font-family: 'Lato', sans-serif;
}

#product-price {
  font-weight: bold;
}

.product-text-box button {
  background-color: green;
  border: none;
  padding: 5px 20px;
  color: #fff;
  font-family: 'Lato', sans-serif;
  float: right;
  margin: 10px 0 20px;
}
<div id="products">
  <div class="product">
    <img src="https://res.cloudinary.com/multiservicios-espay/image/upload/v1630122425/29366_5982af69db.jpg" alt="producto 04">
    <div class="product-text-box">
      <span id="publication-date">27/08/2021</span>
      <h4>Producto 04</h4>
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labo...</span>
    <div class="between">
      <span id="product-price">S/. 59</span>
      <div class="flex">
        <i class="fas fa-cubes"></i>
        <span>4 unidades</span>
      </div>
  </div>
  <button>Ver más</button>
  </div>
</div>

<div class="product">
    <img src="https://res.cloudinary.com/multiservicios-espay/image/upload/v1630122425/29366_5982af69db.jpg" alt="producto 03">
    <div class="product-text-box">
      <span id="publication-date">27/08/2021</span>
      <h4>Producto 03</h4>
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labo...</span>
    <div class="between">
      <span id="product-price">S/. 59</span>
      <div class="flex">
        <i class="fas fa-cubes"></i>
        <span>4 unidades</span>
      </div>
  </div>
  <button>Ver más</button>
  </div>
</div>

<div class="product">
    <img src="https://res.cloudinary.com/multiservicios-espay/image/upload/v1630122425/29366_5982af69db.jpg" alt="producto 02">
    <div class="product-text-box">
      <span id="publication-date">27/08/2021</span>
      <h4>Producto 02</h4>
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labo...</span>
    <div class="between">
      <span id="product-price">S/. 59</span>
      <div class="flex">
        <i class="fas fa-cubes"></i>
        <span>4 unidades</span>
      </div>
  </div>
  <button>Ver más</button>
  </div>
</div>

<div class="product">
    <img src="https://res.cloudinary.com/multiservicios-espay/image/upload/v1630122425/29366_5982af69db.jpg" alt="producto 01">
    <div class="product-text-box">
      <span id="publication-date">27/08/2021</span>
      <h4>Producto 01</h4>
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labo...</span>
    <div class="between">
      <span id="product-price">S/. 59</span>
      <div class="flex">
        <i class="fas fa-cubes"></i>
        <span>4 unidades</span>
      </div>
  </div>
  <button>Ver más</button>
  </div>
</div>

</div>

Cuando muestro los productos se muestran bien como ven en la imagen

introducir la descripción de la imagen aquí

Pero cuando muestro un sólo producto, cómo se ve en esta otra imagen:

introducir la descripción de la imagen aquí

Se alarga a todo el ancho del contenedor, cómo podría mantener un ancho 'normal' con css grid? , como en la primera imagen, imaginese que sólo hay un producto no 4. Gracias.

Nota: hice una actualización del código. El problema radica cuando un producto se muestra, este ocupa todo el ancho del padre (#products) , necesito que siga manteniendo el ancho que tiene cuando se muestran 4 productos.

También pasa cuando no sólo muestro 1, sino 2 o 3, su ancho cambia drásticamente, parece que se debe a 1fr que agrego al id products. He buscado y esta 'medida', toma lo que sobre del contenedor, y dependiendo de eso muestra los elementos. Estaba pensando en agregar un max-width a la clase product, pero no logro obtener el mismo ancho que se muestra al principio.

3
  • No se ve ninguna imagen ...
    – Candid Moe
    el 28 ago. 2021 a las 7:40
  • Con el css que indicas todo funciona perfectamente incluso con una imagen. En el código debe haber algo más, pero con lo que pones no se ve. Sería bueno ver al menos el HTML donde se usa este elemento..
    – Juan
    el 28 ago. 2021 a las 8:45
  • Ya realice una actualizacion del problema, voy a seguir presentando un problema de diseño cuando un filtro es aplicado, es decir, si el usuario busca un producto o filtra por categoría, siempre que me retorne menos de 4 productos, el ancho del producto cambia y no sigue manteniendo el que se muestra cuando son 4 productos
    – Husdady
    el 28 ago. 2021 a las 19:56

2 respuestas 2

0

Prueba con esto haber si te soluciona.

#products {
display: grid;
column-gap: 12px;
row-gap: 15px;
padding: 0 1.5%;
position: relative;
grid-template-columns: repeat(4, minmax(200px, 1fr));

}

3
  • el motivo por el que pongo auto-fit, es para el responsive design, se acomoda la grilla perfectamente dependiendo de la pantalla, creo que la mejor solución es usar media query
    – Husdady
    el 28 ago. 2021 a las 20:58
  • Entiendo perfectamente el funcionamiento de auto-fit, pero en tu caso auto-fit hace que cuando se muestra un sólo elemento este ocupe todo el ancho del contenedor, por eso te sugeri cambiarlo el 29 ago. 2021 a las 19:39
  • Igualmente gracias, la verdad pense que iba usar menos media query con grid, pero con grid el diseño se ve perfecto que con flexbox
    – Husdady
    el 29 ago. 2021 a las 22:19
0

Resolver este problema fue algo tedioso, para ello use media query. Tuve que anotar desde la herramienta para desarrolladores, las medidas en las cuales cambia el ancho del item (producto). Deje de usar auto-fit en las medidas mayores a 424px y lo reemplacé por números. Este es el código css:

@media (min-width: 1247px) {
  #products {
    grid-template-columns: repeat(4, minmax(200px, 1fr));
  }
}

@media (min-width: 938px) and (max-width: 1246px) {
  #products {
    grid-template-columns: repeat(3, minmax(200px, 1fr));
  }
}

@media (min-width: 901px) and (max-width: 937px) {
  #products {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
  }
}

@media (min-width: 862px) and (max-width: 900px) {
  #products {
    grid-template-columns: repeat(4, minmax(200px, 1fr));
  }
}

@media (min-width: 644px) and (max-width: 861px) {
  #products {
    grid-template-columns: repeat(3, minmax(200px, 1fr));
  }
}

@media (min-width: 425px) and (max-width: 643px) {
  #products {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
  }
}

@media (max-width: 424px) {
  #products {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

Si tienes una mejor solución, no olvides dejar tu respuesta, ya que no me parece la mejor manera de resolver eso.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.