當我在 CSS 中使用height: auto;時grid，元素的高度設定為該行中元素的最大高度，所以，如果一個元素非常小，card它所在的div的長度會增加，但是那部分將是空的。我想繞過這種行為，并以某種方式將元素的高度設定為元素的實際高度，如果高度僅與使用 Javascript 中的元素一樣大。我怎樣才能做到這一點？
注意：如果您有一個可能比我更好的方法的想法，歡迎您分享。我不知道我正在做的是否是最好的方法，所以你可以推薦其他方法來做到這一點（如果它在 HTML、CSS 和 Javascript 的范圍內）
編輯：@SebastianSimon 在這個問題的評論中發布了這個：height: min-content。這行得通，只是現在我的網格行中有一個間隙，因為該行中的一個元素真的很長，所以現在那里有一個大洞，似乎沒有什么東西想來填補那個空間......
uj5u.com熱心網友回復：
根據您的描述，我認為您需要一個砌體布局：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/405473.html
標籤：