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
Pero cuando muestro un sólo producto, cómo se ve en esta otra imagen:
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.