将行高与网格宽度联系起来

Question

我的网格可以具有不同高度的单元格内容，每行三个单元格，行高会增长以匹配最高的单元格内容，但不应低于网格宽度的 1/3（基本上意味着单元格要么是方形的，要么是纵向的模式，但绝不是横向模式）。

我以为会有一种纯CSS的方式来实现这一点，但到目前为止我还没有找到。

这可以用 CSS 实现吗？

（B 计划将使用 ResizeObserver 并将当前宽度传播到自定义 css 变量中）

<div class="grid">
  <div class="cell">...arbitrary content...</div>
  <div class="cell">...arbitrary content...</div>
  <div class="cell">...arbitrary content...</div>

  <div class="cell">...arbitrary content...</div>
  <div class="cell">...arbitrary content...</div>
  <div class="cell">...arbitrary content...</div>
</div>

.grid {
  display: grid;
  gap: 20px;
  grid-auto-rows: 1fr; // ? something like minmax(container-width / 3, 1fr)
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cell {
  background-color: lightblue;
  border-radius: 40px;
  overflow: hidden;
}

Answer 1

您可以尝试cqw单位（父容器的宽度），

min-height:33.33cqw

应该形成一个平均正方形或长高。

在浏览器中测试的示例（仅在 ff 和 chrome 中测试）

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cell {
  background-color: lightblue;
  border-radius: 40px;
  min-height:calc(33.33cqw - 1em); /* removed the padding value */
  padding:1em;
  box-sizing:border-box;
  overflow: hidden;
}

<div class="grid">
  <div class="cell">...arbitrary content...</div>
  <div class="cell">...arbitrary content...</div>
  <div class="cell">...arbitrary content...</div>
  <div class="cell">...arbitrary content...</div>
  <div class="cell">...arbitrary content...</div>
  <div class="cell">...arbitrary content...</div>
</div>