0

Ya intente varias cosas y no me funciona, mis cards se salen de la pantalla inicial, intente desde html, css y javascript pero no me funciona, ya estuve checando todo y no encuentro el error

Ya hice muchos intentos en el css y en js

.card-view-simple2{
  background-color: #323232;
  box-shadow: 0 0 4px 0 rgba(12, 12, 12, 0.8);
  min-width: 280px;
  margin: 5px;
  text-align: center;
  color: #ffffff;
  min-height: 200px;
  overflow: visible;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  border-width: 1px;
  transition: all 0.2s;
  display: grid;
  justify-content: center;

son dos css los que utilizo uno para el diseño y otro para la ubicacion y cual esta llamando desde el html

.cards-container-10 {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto;
  padding: 8px;
  flex-wrap: wrap;
  align-items: flex-start;
}
    </div>
    <div id="main_cards_container" class="cards-container-10">
    
 

    </div>

    <!-- Pie de página -->
    <footer id="footer" class="footer"></footer>

</body>

</html>

Se supone que la barra de arriba que se ve negra es un div y donde se ve que termina ahi se deberia pasar para abajo las cards que sobran, ya intente con el felx pero no me lo agarra

1 respuesta 1

0

el problema que tienes esta relacionado con la clase .main_cards_container. Al poner la propiedad "display: grid" la forma de hacer que los elementos se ajusten a tu contenedor seria a través de la propiedad "grid-template-colums" con la función repeat() como el siguiente ejemplo:

.cards-container-10 {
  display: grid;
  grid-template-columns: repeat(auto-fill, 300px);
  padding: 8px;
  /* flex-wrap: wrap; */
  /* align-items: flex-start; */
  border: 1px solid red
} /* observamos que no es necesario el align items ni el flex-wrap */  

O bien la otra forma, que en lo personal me gusta más, sería haciendo uso de flexbox, cambiando el "display: grid" por "display: flex" y ahora si que tendria efecto el wrap que estas haciendo en tu contenedor. Te dejo un ejemplo con flexbox

.card-view-simple2 {
  background-color: #323232;
  box-shadow: 0 0 4px 0 rgba(12, 12, 12, 0.8);
  min-width: 280px;
  margin: 5px;
  text-align: center;
  color: #ffffff;
  min-height: 200px;
  overflow: visible;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  border-width: 1px;
  transition: all 0.2s;
  display: grid;
  justify-content: center;
}

.cards-container-10 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-start;
  border: 1px solid red
}
   

 <!DOCTYPE html>
    <html lang="en">

    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>

    <body>
      <div id="main_cards_container" class="cards-container-10">
        <div class="card-view-simple2"></div>
        <div class="card-view-simple2"></div>
        <div class="card-view-simple2"></div>
        <div class="card-view-simple2"></div>
      </div>

      <!-- Pie de página -->
      <footer id="footer" class="footer"></footer>
    </body>

    </html>

4
  • Hola, ya intente lo que me dijiste pero no hay solucion, sigue sin moverse alguna card Commented el 29 jun. 2023 a las 14:26
  • Okay, con gusto te ayudo si proporcionas mas a detalle el código, me parece que el html que pusiste esta recortado, quedo atento ☺️ Commented el 29 jun. 2023 a las 14:50
  • muchas gracias, mas arriba subi el html completo Commented el 29 jun. 2023 a las 15:37
  • @FernandaRodriguez no se aplico la edición, me parece que hubo un problema que no aclaraba mas el problema, podrías intentar de nuevo siendo un poco mas especifica? Commented el 30 jun. 2023 a las 2:47

Tu Respuesta

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

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