可弯曲的 3 行 CSS 网格答案

【问题标题】：3 rows css grid that flexes可弯曲的 3 行 CSS 网格
【发布时间】：2020-10-21 23:51:14
【问题描述】：

不确定描述这一点的最佳方式，但我有一个反应应用程序，它有一列包含三个折叠面板，一个在彼此的顶部。我想要一个网格，当一个手风琴关闭时，其他手风琴将“弯曲”以填充剩余空间。我当前的 css 不工作：

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

我正在考虑将 minmax 用于：

style={{ display: 'grid', gridTemplateColumns: '100%', gridTemplateRows: 'minmax(30px 1fr)' }}

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

【问题讨论】：

标签： css reactjs css-grid

【解决方案1】：

改用 Flexbox：

document.addEventListener("click", e => {
  e.target.classList.toggle("closed")
})

.container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 200px;
  height: 300px;
}

.item {
  flex: 1 1 33%;
  background: tomato;
  border-bottom: 1px solid white;

  /* These styles just for the sake of making the demo look nicer */
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: system-ui, sans-serif;
}

.item.closed {
  flex: 0 0 30px;
}

<div class="container">
  <div class="item">Test</div>
  <div class="item">Test</div>
  <div class="item">Test</div>
</div>

【讨论】：