Buen día comunidad,
Tengo la siguiente imagen
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