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

Question

我正在使用CSS Grid和Collapsible div制作2列。问题是，当我扩展其中一个可折叠div时，另一个div也将扩展为空白区域。

任何人都知道如何解决这个问题，而不是让2个父亲div为2列？或者使用其他方法代替CSS网格？

截图css网格与可折叠div

Answer 1

你想要达到的目的更多的是手风琴扩展的砖石布局。这不是网格的设计目标。 CSS Grid是二维的，因此您始终可以同时处理行和列。

解决方案：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

希望它能回答你的问题。