Cuando estoy usando height: auto; mientras usa grid en CSS, la altura del elemento se establece en la altura máxima de un elemento en esa fila, por lo que, si un elemento es realmente pequeño, la longitud de la card div en la que se encuentra aumentará, pero esa parte estar vacío Quiero omitir ese comportamiento y de alguna manera establecer la altura del elemento a la altura real del elemento si la altura fuera tan grande como los elementos dentro de él usando Javascript. ¿Cómo puedo hacer esto?
NOTA: Si tiene una idea de un enfoque que podría ser mejor que el mío, puede compartirlo. No sé si lo que estoy haciendo es el mejor enfoque, por lo que puede recomendar otras formas de hacerlo (si está dentro de los límites de HTML, CSS y Javascript)
EDITAR : @SebastianSimon publicó esto en los comentarios de esta pregunta: height: min-content . Esto funcionó, solo que ahora hay un espacio en mi fila de la cuadrícula porque un elemento en esa fila es muy largo, así que ahora hay un gran agujero allí y nada parece querer venir y llenar ese espacio...
Según su descripción, creo que necesita un diseño de mampostería:
const container = document.getElementById('container'); (function(container) { let html = '' for (let i = 0; i < 18; i++) { const h = 50 + 10 * i; html += ` <div style="height: ${ h }px;line-height: ${ h }px">${i}</div> ` } container.innerHTML = html })(container); body { margin: 0; padding: 1rem; } .masonry-with-flex { display: flex; flex-direction: column; flex-wrap: wrap; max-height: 1000px; } .masonry-with-flex div { width: 150px; background: #EC985A; color: white; margin: 0 1rem 1rem 0; text-align: center; font-family: system-ui; font-weight: 900; font-size: 2rem; } <div id="container" class="masonry-with-flex"></div>Más soluciones aquí
Otro enfoque podría ser:
const cards = document.querySelectorAll(".card"); (function() { cards.forEach((card, i) => { card.style.height = 50 + i * 10 + "px" }) })(); .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .column { display: flex; flex-direction: column; gap: 10px; } .card { width: 100%; display: flex; align-items: center; justify-content: center; box-sizing: border-box; background-color: rgba(255, 165, 0, 0.3); border: 1px solid rgba(255, 165, 0, 0.8); } <div id="app" class="container"> <div class="column"> <div class="card">A</div> <div class="card">D</div> </div> <div class="column"> <div class="card">B</div> <div class="card">E</div> </div> <div class="column"> <div class="card">C</div> <div class="card">F</div> </div> </div>