0

Tengo 3 tarjetas alineadas de forma horizontal, y quiero agregar otras 3, el problema es que se agregan las 3 justo al lado de las 3 anteriores, quedando 6 en la misma línea, como puedo hacer para tener 2 líneas horizontales con 3 tarjetas cada línea? Me recomendaron usar bootstrap grid, pero en este caso no sabría cómo implementarlo. Adjunto código y fotos.

Index:

<div class="title-cards">
        <h2>Selecciona una asignatura</h2>
    </div>

    <div class="title-cards">
        <h3>1er Año</h3>
        <h3>1er y 2do Bimestre</h3>
    </div>

    <div class="container-card">
    
    <div class="card">
        <figure>
            <img src="images/Evangelios.jpg">
        </figure>
        <div class="contenido-card">
            <h3>Evangelios</h3>
            <p>Portal de tareas de Evangelios</p>
            <a href="#">Acceder</a>
        </div>
    </div>

    <div class="card">
        <figure>
            <img src="images/Homilética.jpg">
        </figure>
        <div class="contenido-card">
            <h3>Homilética I</h3>
            <p>Portal de tareas de Homilética I</p>
            <a href="#">Acceder</a>
        </div>
    </div>

    <div class="card">
        <figure>
            <img src="images/Testamento.jpg">
        </figure>
        <div class="contenido-card col-4">
            <h3>Introducción al Antiguo Testamento</h3>
            <p>Portal de tareas de Introducción al Antiguo Testamento</p>
            <a href="#">Acceder</a>
        </div>
    </div>

CSS:

 @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}
/*Cards*/
.container-card{
    width: 100%;
    display: flex;
    max-width: 1100px;
    margin: auto;
}
.title-cards{
    width: 100%;
    max-width: 1080px;
    margin: auto;
    padding: 20px;
    margin-top: 20px;
    text-align: center;
    color: black;
}
.card{
    width: 100%;
    margin: 20px;
    border-radius: 6px;
    overflow: hidden;
    background:#fff;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.2);
    transition: all 400ms ease-out;
    cursor: default;
}


.card:hover{
    box-shadow: 5px 5px 20px rgba(0,0,0,0.4);
    transform: translateY(-3%);
}
.card img{
    width: 100%;
    height: 210px;
}
.card .contenido-card{
    padding: 15px;
    text-align: center;
}
.card .contenido-card h3{
    margin-bottom: 15px;
    color: #7a7a7a;
}
.card .contenido-card p{
    line-height: 1.8;
    color: #6a6a6a;
    font-size: 14px;
    margin-bottom: 5px;
}
.card .contenido-card a{
    display: inline-block;
    padding: 10px;
    margin-top: 10px;
    text-decoration: none;
    color: #2fb4cc;
    border: 1px solid #2fb4cc;
    border-radius: 4px;
    transition: all 400ms ease;
    margin-bottom: 5px;
}
.card .contenido-card a:hover{
    background: #2fb4cc;
    color: #fff;
}


.flex-container {
  flex-wrap: wrap;
}

@media only screen and (min-width:320px) and (max-width:768px){
    .container-card1{
        flex-wrap: wrap;
    }
    .card1{
        margin: 15px;
    }
}
/*Fin-Cards*/

Index

1 respuesta 1

1

Creo que quieres algo asi:

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}
/*Cards*/
.container-card{
    width: 100%;
    display: flex;
    max-width: 1100px;
    margin: auto;
}
.title-cards{
    width: 100%;
    max-width: 1080px;
    margin: auto;
    padding: 20px;
    margin-top: 20px;
    text-align: center;
    color: black;
}
.card{
    width: 100%;
    margin: 20px;
    border-radius: 6px;
    overflow: hidden;
    background:#fff;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.2);
    transition: all 400ms ease-out;
    cursor: default;
}


.card:hover{
    box-shadow: 5px 5px 20px rgba(0,0,0,0.4);
    transform: translateY(-3%);
}
.card img{
    width: 100%;
    height: 210px;
}
.card .contenido-card{
    padding: 15px;
    text-align: center;
}
.card .contenido-card h3{
    margin-bottom: 15px;
    color: #7a7a7a;
}
.card .contenido-card p{
    line-height: 1.8;
    color: #6a6a6a;
    font-size: 14px;
    margin-bottom: 5px;
}
.card .contenido-card a{
    display: inline-block;
    padding: 10px;
    margin-top: 10px;
    text-decoration: none;
    color: #2fb4cc;
    border: 1px solid #2fb4cc;
    border-radius: 4px;
    transition: all 400ms ease;
    margin-bottom: 5px;
}
.card .contenido-card a:hover{
    background: #2fb4cc;
    color: #fff;
}


.flex-container {
  flex-wrap: wrap;
}

@media only screen and (min-width:320px) and (max-width:768px){
    .container-card1{
        flex-wrap: wrap;
    }
    .card1{
        margin: 15px;
    }
}
/*Fin-Cards*/
<div class="title-cards">
      <h2>Selecciona una asignatura</h2>
  </div>

  <div class="title-cards">
      <h3>1er Año</h3>
      <h3>1er y 2do Bimestre</h3>
  </div>

  <div class="container-card">

  <div class="card">
    <figure>
      <img src="images/Evangelios.jpg">
    </figure>
    <div class="contenido-card">
      <h3>Evangelios</h3>
      <p>Portal de tareas de Evangelios</p>
      <a href="#">Acceder</a>
    </div>
  </div>

  <div class="card">
    <figure>
      <img src="images/Homilética.jpg">
    </figure>
    <div class="contenido-card">
      <h3>Homilética I</h3>
      <p>Portal de tareas de Homilética I</p>
      <a href="#">Acceder</a>
    </div>
  </div>

  <div class="card">
    <figure>
      <img src="images/Testamento.jpg">
    </figure>
    <div class="contenido-card col-4">
      <h3>Introducción al Antiguo Testamento</h3>
      <p>Portal de tareas de Introducción al Antiguo Testamento</p>
      <a href="#">Acceder</a>
    </div>
  </div>
</div>

<div class="container-card">

  <div class="card">
    <figure>
      <img src="images/Evangelios.jpg">
    </figure>
    <div class="contenido-card">
      <h3>Evangelios</h3>
      <p>Portal de tareas de Evangelios</p>
      <a href="#">Acceder</a>
    </div>
  </div>

  <div class="card">
    <figure>
      <img src="images/Homilética.jpg">
    </figure>
    <div class="contenido-card">
      <h3>Homilética I</h3>
      <p>Portal de tareas de Homilética I</p>
      <a href="#">Acceder</a>
    </div>
  </div>

  <div class="card">
    <figure>
      <img src="images/Testamento.jpg">
    </figure>
    <div class="contenido-card col-4">
      <h3>Introducción al Antiguo Testamento</h3>
      <p>Portal de tareas de Introducción al Antiguo Testamento</p>
      <a href="#">Acceder</a>
    </div>
  </div>
</div>

Olvidaste cerrar <div class="container-card">

2
  • Funcionó! Muchas Gracias!! Commented el 4 may. 2022 a las 20:25
  • Me alegro, no olvides marcar la respuesta como 'Correcta' para así cerrar la pregunta. Saludos!
    – EvilFearzZ
    Commented el 4 may. 2022 a las 20:27

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.