Estoy trabajando con una app de venta de cosas para el hogar desde react. Tengo mi array de productos en un json local y en un componente, hago el destructuring de las props para ver los productos en cards. Mi objetivo es con css poder hacer que queden las cards una al lado de la otra, asi que utilice el float left. Las primeras 7 filas quedan bien pero despues me quedan dos cards en la derecha y la izquierda vacia, debajo una fila de 4 cards correctamente pero abajo de vuelta dos cards, esta vez hacia la izquierda. Yo necesitaria que me queden 9 filas de cuatro cards, probe con distintas propiedades, tambien con float right pero sigue pasando lo mismo. Muestro mi codigo:
<div className='card-box'>
<div className='card'>
<img className='card-img' alt='producto' src={image}></img>
<div>
<h6 className='card-name'>{name}</h6>
<p className='card-price'>${price}</p>
<div className='box-count'>
<ItemCount stock={stock} cantidades={tomarCantidad}/>
<div className='box-count-onadd'>
<button onClick={onAdd}>Agregar al carrito</button>
</div>
</div>
<p className='card-details'><Link to={`/productos/${name}/${id}`} className='card-link'>Ver detalles</Link></p>
</div>
</div>
</div>
.card-box{
font-family: 'Montserrat', sans-serif;
}
.card{
max-width: 15rem;
margin: 1rem;
float: left;
border: none;
margin-left: 4.5rem;
}
.card-img{
max-height: 15rem;
max-width: 15rem;
}
.card-price{
text-align: center;
font-weight: bold;
}
.card-name{
justify-content: center;
font-size: 13px;
margin-top: 0.8rem;
text-align: center;
}
.card-link{
margin-left: 4.5rem;
font-size: 15px;
color: black;
font-weight: bold;
text-decoration: none;
}
.card-link:hover{
color: black;
}
.card-details{
position: relative;
}
.card-details::after{
content: '';
position: absolute;
width: 38%;
height: 1px;
bottom: 0;
left: 70px;
right: 0;
background-color: #937653;
transform: scaleX(0);
transform-origin: bottom left;
transition: transform 0.3s ease-out;
}
.card-details:hover::after{
transform: scaleX(1);
transform-origin: bottom left;
}