我正在使用CSS Grid和Collapsible div制作2列。问题是,当我扩展其中一个可折叠div时,另一个div也将扩展为空白区域。
任何人都知道如何解决这个问题,而不是让2个父亲div为2列?或者使用其他方法代替CSS网格?
截图css网格与可折叠div
你想要达到的目的更多的是手风琴扩展的砖石布局。这不是网格的设计目标。 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
希望它能回答你的问题。