使用可折叠div修复CSS Grid自动扩展高度

Question

我使用CSS Grid和Collapsible div创建了2列。 问题是当我扩展可折叠div之一时， 另一个div也会随着空白区域而扩展。

任何人都知道如何解决这个问题，而不必为2列提供2个父母div？ 或者使用其他方法代替CSS-grid？

使用可折叠div屏幕显示css网格

Answer 1

您想要实现的是在手风琴扩展上的一种砖石布局。那不是网格设计的目的。 CSS网格是二维的，因此您始终要同时处理行和列。

解决方案：Flexbox

#grid {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: space-around;
    height: max-content;
    flex-flow: row wrap;
    counter-reset: brick;
}


.cell {
    width: 250px;
    flex: 1 0 calc(33.333% - 20px);
    padding: 20px;
    background: #efefef;
}

请检查我创建的演示。 https://codepen.io/abhishekrajeshirke/pen/NLzLJJ

希望它能回答您的问题。