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

问题描述

我正在尝试构建使用 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 方向更改为列时，所有内容都出现在一列中，左对齐是 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>
...

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

解决方法

这不是一个完整的答案，但它确实满足了几个要求。我开始检查 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>

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

如果有人有这方面的经验，我想听听。我会看看我是否可以更新问题中的标签。

bootstrap-4 css-grid flexbox flexbox