弯曲的3行css网格

不确定用什么方式来描述这个问题，但我有一个react应用程序，它有一列，包含三个折叠面板，一个在另一个上面。我想要一个网格，当一个手风琴关闭时，其他手风琴将“弯曲”以填充剩余空间。我当前的css不起作用：

style={{display:'grid'，gridTemplateColumns:'100%'，gridTemplateRows:'auto'}}

我正在考虑将minmax用于：

style={{display:'grid'，gridTemplateColumns:'100%”，gridTemplateRows:'minmax（30px 1fr）}

但手风琴的高度保持不变。也许我需要分享更多的代码，但我正在使用ant设计和样式化组件，所以要准确地显示我拥有的东西有点复杂。希望有一个简单的css网格解决方案可以让我适应。

改用Flexbox：

document.addEventListener（“单击”，e=>{
e、 target.classList.toggle（“关闭”）
})

.container{
显示器：flex；
弯曲方向：立柱；
对齐项目：拉伸；
宽度：200px；
高度：300px；
}
.项目{
弹性：133%；
背景：番茄；
边框底部：1px纯白；
/*这些样式只是为了让演示看起来更漂亮*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
字体系列：系统界面，无衬线；
}
.项目.已结束{
柔性：0 30像素；
}

试验
试验
试验

改用Flexbox：

document.addEventListener（“单击”，e=>{
e、 target.classList.toggle（“关闭”）
})

.container{
显示器：flex；
弯曲方向：立柱；
对齐项目：拉伸；
宽度：200px；
高度：300px；
}
.项目{
弹性：133%；
背景：番茄；
边框底部：1px纯白；
/*这些样式只是为了让演示看起来更漂亮*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
字体系列：系统界面，无衬线；
}
.项目.已结束{
柔性：0 30像素；
}

试验
试验
试验