1

Buen día comunidad,

Tengo la siguiente imagen

Imagen de cards con alto dinamico

Y mi html estoy usando grid

.cards-container {
  width: 100%;
  max-width: 800px;
  margin: 1 auto;
  display: grid;
  gap: 0 35px;
  grid-template-columns: repeat(4, 1fr);
  justify-content: center;
}

.cards-container > .item {
  width:180px;
  height: 100%;
 
}
.cards-container .item .title__item p {
  border-radius: 5px;
  background-color: #34b233;
  text-align: center;
  font-size: 30px;
  color: #fff;
  padding: 3px;
  font-weight: bold;
}

.list-card li {
    list-style: none;
}
<div class="cards-container">
  <div class="item">
    <div class="title__item">
      <p> A</p>
    </div>
    <div class="item-container">
      <ul class="list-card">
        <li>Acapulco</li>
        <li>Aguascalientes</li>
      </ul>
    </div>
  </div>
  <div class="item">
    <div class="title__item">
      <p> H </p>
    </div>
    <div class="item-container">
      <ul class="list-card">
        <li>Hermosillo</li>
        <li>Huatulco</li>
      </ul>
    </div>
  </div>
  <div class="item">
    <div class="title__item">
      <p> O </p>
    </div>
    <div class="item-container">
      <ul class="list-card">
        <li>Oaxaca</li>
      </ul>
    </div>
  </div>
  <div class="item">
    <div class="title__item">
      <p> T </p>
    </div>
    <div class="item-container">
      <ul class="list-card">
        <li>Tampico</li>
        <li>Tuxtla Gutierrez</li>
        <li>Tijuana</li>
        <li>Toluca</li>
        <li>Torreon</li>
      </ul>
    </div>
  </div>
  <div class="item">
    <div class="title__item">
      <p> C </p>
    </div>
    <div class="item-container">
      <ul class="list-card">
        <li>Ciudad Obregon</li>
        <li>ciudad del Carmen</li>
        <li>Ciudad Obregon</li>
        <li>Ciudad Juarez</li>
        <li>Culiacan</li>
        <li>Chihuahua</li>
        <li>Cancun</li>
        <li>Chetumal</li>
      </ul>
    </div>
  </div>
  <div class="item">
    <div class="title__item">
      <p> I </p>
    </div>
    <div class="item-container">
      <ul class="list-card">
        <li>Ixtapa</li>
      </ul>
    </div>
  </div>
  <div class="item">
    <div class="title__item">
      <p> P </p>
    </div>
    <div class="item-container">
      <ul class="list-card">
        <li>Puebla</li>
        <li>Puerto Vallarta</li>
        <li>Puerto Escondido</li>
      </ul>
    </div>
  </div>
  <div class="item">
    <div class="title__item">
      <p> V </p>
    </div>
    <div class="item-container">
      <ul class="list-card">
        <li>Veracruz</li>
        <li>Villa Hermosa</li>
        <li>Puerto Escondido</li>
      </ul>
    </div>
  </div>
</div>

Mi gran pregunta es ¿como puedo hacer que las cards tengan un alto dinamico dependiendo de cuanta información tiene dentro?, que tenga automáticamente diferentes altos sin yo colocar un alto manual a cada card.

He probado distintas opciones con grid pero ninguna parece funcionar, también probé que todo fuera flexbox pero tampoco me sale, estoy aprendiendo grid, espero puedan ayudarme.

Ya tengo la mayoría del html solo lo único que me falta es que las tarjetas tengan un ancho dinámico dependiendo de su alto.

Les dejo mi snippet

2 respuestas 2

1

Dentro de cards-container > .item en tu CSS.
Podemos añadir el borde de las tarjetas y verlos, además de añadir un height: fit-content para que estas tengan una altura dinámica.

.cards-container > .item {
  border: 1px solid black;
  width:180px;
  height: fit-content;
}

Pero sucede que..
Anteriormente le has dado un display grid.
Entonces, ese grid mantiene las distancias entre tarjetas, y su disposicion en general.

introducir la descripción de la imagen aquí



Ahora, en cuanto a cambiar la diposicion... sería lo siguiente:

  • Agregamos en container:
    • Agregando column-count asignanos el numero de columnas a mostrar.
    • Agregando column-gap es el espacio entre ellas
  • Cambiamos y agregamos en container > item:
    • grid-template-rows: el mismo que tenias, pero rows.
    • break-inside para evitar que las cartas se rompan

.cards-container {
    border: 1px solid blue;
    width: 100%;
    margin: 1 auto;
    justify-content: center;
    column-count: 2; /* Numero de Columnas a mostrar */
    column-gap: 0px; /* Espacio entre columnas */
}

.cards-container>.item {
    border: 1px solid red;
    display: grid;
    grid-template-rows: 1fr auto; /* Este nos ordena las filas */
    width: 180px;
    break-inside: avoid; /* Evita que las columnas se rompan */
}

.cards-container .item .title__item p {
    border-radius: 5px;
    background-color: #34b233;
    text-align: center;
    font-size: 30px;
    color: #fff;
    padding: 3px;
    font-weight: bold;
}

.list-card li {
    list-style: none;
}
<div class="cards-container">
    <div class="item">
        <div class="title__item">
            <p> A</p>
        </div>
        <div class="item-container">
            <ul class="list-card">
                <li>Acapulco</li>
                <li>Aguascalientes</li>
            </ul>
        </div>
    </div>
    <div class="item">
        <div class="title__item">
            <p> H </p>
        </div>
        <div class="item-container">
            <ul class="list-card">
                <li>Hermosillo</li>
                <li>Huatulco</li>
            </ul>
        </div>
    </div>
    <div class="item">
        <div class="title__item">
            <p> O </p>
        </div>
        <div class="item-container">
            <ul class="list-card">
                <li>Oaxaca</li>
            </ul>
        </div>
    </div>
    <div class="item">
        <div class="title__item">
            <p> T </p>
        </div>
        <div class="item-container">
            <ul class="list-card">
                <li>Tampico</li>
                <li>Tuxtla Gutierrez</li>
                <li>Tijuana</li>
                <li>Toluca</li>
                <li>Torreon</li>
            </ul>
        </div>
    </div>
    <div class="item">
        <div class="title__item">
            <p> C </p>
        </div>
        <div class="item-container">
            <ul class="list-card">
                <li>Ciudad Obregon</li>
                <li>ciudad del Carmen</li>
                <li>Ciudad Obregon</li>
                <li>Ciudad Juarez</li>
                <li>Culiacan</li>
                <li>Chihuahua</li>
                <li>Cancun</li>
                <li>Chetumal</li>
            </ul>
        </div>
    </div>
    <div class="item">
        <div class="title__item">
            <p> I </p>
        </div>
        <div class="item-container">
            <ul class="list-card">
                <li>Ixtapa</li>
            </ul>
        </div>
    </div>
    <div class="item">
        <div class="title__item">
            <p> P </p>
        </div>
        <div class="item-container">
            <ul class="list-card">
                <li>Puebla</li>
                <li>Puerto Vallarta</li>
                <li>Puerto Escondido</li>
            </ul>
        </div>
    </div>
    <div class="item">
        <div class="title__item">
            <p> V </p>
        </div>
        <div class="item-container">
            <ul class="list-card">
                <li>Veracruz</li>
                <li>Villa Hermosa</li>
                <li>Puerto Escondido</li>
            </ul>
        </div>
    </div>
</div>

2
  • no hay forma de que suban las tarjeta rellenando el pequeño espacio abajo de A, H, P? el 23 dic. 2020 a las 22:16
  • Listo, revisa la respuesta. DEBES adaptar los datos a tu disposición, ya que estos están puestos para que se vean en esta pagina de buen modo. Tu dale el orden que necesites.
    – Excorpion
    el 24 dic. 2020 a las 12:01
0

Ya que estás trabajando con CSS Grid, puedes aplicar el uso de align-self de esta forma:

nodo-hijo-del-contenedor {
    align-self: start;
}

Que sirve para y cito1

Ten en mente que una vez establezcas align-self: start, la altura de cada hijo será determinada por el contenido del <div>

Que basado en tu código quedaría de esta forma:

.item {
    align-self: start;
}

Referencia

2
  • Me funciona pero me sigue respetando el height maximo de la fila ¿Hay alguna forma en que se adapten todos abajo de la card con la height diferente? el 23 dic. 2020 a las 22:21
  • 1
    @ManueelPerezz entiendo lo que buscas, ahora mismo no dispongo del tiempo para proponer una edición, pero te sugiero busques sobre css grid masonry por ahi va
    – BetaM
    el 23 dic. 2020 a las 22:23

Tu Respuesta

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

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