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

问题描述 投票:0回答:1

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

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

截图css网格与可折叠div

enter image description here

html css css3 css-grid
1个回答
0
投票

你想要达到的目的更多的是手风琴扩展的砖石布局。这不是网格的设计目标。 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

希望它能回答你的问题。

© www.soinside.com 2019 - 2024. All rights reserved.