如何将元素的高度设置为 HTML 元素的实际所需高度，而不是 CSS 或 JavaScript 中的 auto？

Question

当我使用height: auto; 在 CSS 中使用grid时，元素的高度设置为该行中元素的最大高度，因此，如果元素非常小，它所在的card div 的长度会增加，但那部分会为空。 如果高度仅与使用 Javascript 中的元素一样大，我想绕过该行为并以某种方式将元素的高度设置为元素的实际高度。 我怎样才能做到这一点？

注意：如果您有一个可能比我更好的方法的想法，欢迎您分享。 我不知道我正在做的是否是最好的方法，因此您可以推荐其他方法来执行此操作（如果它在 HTML、CSS 和 Javascript 的范围内）

编辑：@SebastianSimon 在这个问题的评论中发布了这个： height: min-content 。 这行得通，只是现在我的网格行中有一个间隙，因为该行中的一个元素真的很长，所以现在那里有一个大洞，似乎没有什么东西想来填补那个空间......

Answer 1

根据您的描述，我认为您需要一个砌体布局：

 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>

更多解决方案在这里

---

编辑

另一种方法可能是：

 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>