Quiero reducir el tamaño de estos divs para que cada fila contenga 3 cartas como máximo. A medida que cambio las medidas en el CSS, se vuelve más y más pequeño. PD: ¡No tengo permitido usar Bootstrap! Intenté usar diferentes medidas y también la función de cuadrícula, pero no fue de ayuda.
Esta es la captura de pantalla de los divs en mi sitio web
.locations .box-container { display: flex; flex-wrap: wrap; gap: 1.5rem; grid-template-rows: auto; } .locations .box-container .box { overflow: hidden; box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1); border: 1rem solid #fff; border-radius: 0.5rem; flex: 1 1 30rem; height: 25rem; position: relative; } .locations .box-container .box img { height: 100%; width: 100%; object-fit: cover; } .locations .box-container .box .card-body { position: absolute; top: 0; left: 0; height: 100%; width: 100%; text-align: center; background: rgba(0, 0, 0, 0.7); padding: 2rem; padding-top: 5rem; } .locations .box-container .box .card-body .card-btn { display: inline-block; margin-top: 1rem; background: orange; color: #fff; padding: 0.8rem 3rem; border: 0.2rem solid orange; cursor: pointer; font-size: 1.7rem; } .locations .box-container .box .card-body .card-btn:hover { border: 2px solid orange; color: orange; background: transparent; transition: 0.4s ease; } .locations .box-container .box .card-body .card-btn:focus { outline: none; } .locations .box-container .box .card-body h5 { font-size: 2.5rem; color: orange; } .locations .box-container .box .card-body p { font-size: 1.5rem; color: #eee; padding: 0.5rem 0; } <section class="locations"> <h1>Locations</h1> <p>"Adventure is out there."</p> <br> <div class="box-container"> <div class="box"> <div class="card"> <img src="./murree.jpg" alt="Murree, Pakistan"> <div class="card-body"> <h5>Murree</h5> <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-btn">View</a> </div> </div> </div> </div> </section>Simplifiqué un poco tu HTML y CSS, pero esta solución debería funcionar. Esto le dará 3 cartas por fila y llenará las filas debajo. Eliminé parte de su estilo por brevedad, por lo que deberá volver a agregarlo, pero esto debería darle la estructura que necesita.
.locations .box-container { display: flex; flex-wrap: wrap; } .locations .box-container .box { overflow: hidden; box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1); border: 1rem solid #fff; border-radius: 0.5rem; height: 25rem; flex: 1 0 25%; margin: 0.5rem; box-sizing: border-box; } .locations .box-container .box .card { height: 100%; width: 100%; text-align: center; background: rgba(0, 0, 0, 0.7); padding: 2rem; } .locations .box-container .card h5 { font-size: 2.5rem; color: orange; } .locations .box-container .card p { font-size: 1.5rem; color: #eee; padding: 0.5rem 0; } .locations .box-container .card a { display: inline-block; margin-top: 1rem; background: orange; color: #fff; padding: 0.8rem 3rem; border: 0.2rem solid orange; cursor: pointer; font-size: 1.7rem; } <section class="locations"> <div class="box-container"> <div class="box"> <div class="card"> <h5>Title</h5> <p>Card content.</p> <a href="#">View</a> </div> </div> <div class="box"> <div class="card"> <h5>Title</h5> <p>Card content.</p> <a href="#">View</a> </div> </div> <div class="box"> <div class="card"> <h5>Title</h5> <p>Card content.</p> <a href="#">View</a> </div> </div> <div class="box"> <div class="card"> <h5>Title</h5> <p>Card content.</p> <a href="#">View</a> </div> </div> <div class="box"> <div class="card"> <h5>Title</h5> <p>Card content.</p> <a href="#">View</a> </div> </div> </div> </section>