具有弹性列方向的 3 列布局

Question

我正在尝试构建使用 React 映射的项目的视图。目标是有一个 3 列布局，其中项目按列方向排列。每个面板内部都有一个隐藏的 div，一旦单击面板，就会展开 div。这样做的想法是，这只会将该列中的内容下推。

我已经尝试过网格版本，目前正在尝试使用百分比的传统row, col flex 属性进行引导。

为方便起见，我做了两个例子，只是使用 jquery 来模拟点击功能。

首先是网格：https://jsfiddle.net/lharby/vmaut95L/

基本的CSS：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 2em 2em;
  grid-auto-flow: column;
}

这里的问题是，当您单击具有隐藏内容的项目（面板 3）时，所有面板都会展开到相同的大小。

这里是引导版本：https://jsfiddle.net/lharby/u83L6tph/

这样更好，但是当我将 flex 方向更改为 column 时，所有内容都显示在一列中，左对齐为 33% 宽度 (col-md-4)。正如小提琴中所见，这是使用标准引导 css。

标记类似，但使用了更多引导实用程序类：

<div class="row exclusive-offers-wrapper">
  <div class="col-md-4 mx-n1 p-4">
    <div class="item">
    </div>
</div>
...

我们的目标是有这样的行为：

Answer 1

这不是一个完整的答案，但它确实满足了几个要求。我开始检查 Bootstrap 4 Cards：https://getbootstrap.com/docs/4.0/components/card/#card-columns

似乎可以通过一些非常简单的标记来创建砖石风格的布局。现在唯一的问题是，当我单击其中一张卡片以显示隐藏的内容时，其中一些卡片可能会跳来跳去（单击小提琴中的第一项）。

我在这里做了一个 jsfiddle：https://jsfiddle.net/lharby/avfpq1sr/

基本标记：

<div class='card-columns'>
  <div>
    <div class='card item'>
      <h4>A heading</h4>
      <div class="hidden">
        <p class="mt-4 mb-5">Save up to 20% off* your business insurance thanks to....</p>
        <a href="https://www.goodlight.co.uk/wp-content/uploads/2017/07/goodlight-commercial-led-lighting.png" title="View" class="sc-pFZIQ iVCQdF cta btn-primary" target="_blank" rel="noopener noreferrer">View</a>
      </div>
    </div>
  </div>
  <div class='card item'>
    <div>
    ...
    </div>
  </div>
</div>

我尝试在隐藏内容上使用height: 0 和overflow: hidden 而不是隐藏的display:none，但结果相同。

如果有人对此有任何经验，我想听听。我会看看我是否可以更新问题中的标签。