CSS 在响应式网格上设置 "same height" 行部分的唯一解决方案

Question

想要：一个CSS唯一的解决方案，可以在每行的基础上启用等高网格"sections"，这也是响应式的。

这张图有望比 post 中的文字更好地解释需求：

"item grid" 应该是响应式的 - 因为它可以根据视口宽度在每行显示不同数量的卡片。在给定行内，等效部分应具有相同的高度 "per row"。

在下面 HTML 和 CSS - 项目卡片被分成我们需要的行（在两个示例断点桌面和移动）但是内容部分高度是可变的（恶心）：

.items {
  max-width: 1200px;
}

.item {
  width: 25%;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  padding: 0 12px;
  margin: 24px -4px 24px 0;
}

@media (max-width: 600px) {
  .item {
    width: 50%;
  }
}

.item__heading {
  background-color: #d4d0f5;
  padding: 10px;
  text-align: center;
  border: 1px solid #bbbbbb;
}

.item__content {
  padding: 10px;
  border-left: 1px solid #bbbbbb;
  border-right: 1px solid #bbbbbb;
}

.item__price {
  background-color: #e0f6d9;
  padding: 10px;
  text-align: center;
  border: 1px solid #bbbbbb;
}

<div class="items">

  <div class="item">
    <div class="item__heading">
      Item 1
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__price">
      £99.99
    </div>
  </div>


  <div class="item">
    <div class="item__heading">
      Item 2
    </div>
    <div class="item__content">
      Some content that is longer than other items on the same row and sets the height of this section
    </div>
    <div class="item__price">
      £69.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 3
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__price">
      £69.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 4
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__price">
      £109.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 5
    </div>
    <div class="item__content">
      Some content that is a medium kind of length blah blah
    </div>
    <div class="item__price">
      £29.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 6
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__price">
      £99.99
    </div>
  </div>

    
</div>

以下代码笔是基于 JavaScript 的解决方案，可实现预期结果 - 但这是我要避免的： https://codepen.io/rusta/pen/KmbVKd

限制

网格列表显示的项目数可以是1-150之间的任意数字
要显示的项目内容的大小将真正可变（因此选择 "sensible" min-height 不是一个选项）

我希望新的 CSS 网格系统能帮助我实现上述目标，但玩了一段时间后，它似乎需要比我希望的更多的结构，而且响应方面似乎颇具挑战性。但也许某处有一个 CSS 基于网格的答案

进一步说明：我说的是 CSS 唯一解决方案，我的意思是 non-JS 解决方案。如果 HTML 块需要更改（order/nesting/class 名称）以支持绝对没问题的 non-JS 解决方案

在这个简单的例子中 - 我们只关注 "content" 部分以获得 "matching heights" - 因为我们可以假设标题和价格部分自然具有相同的高度。在任何匹配的网格部分 (header/content/price/other) 中启用 "equivalency" 会很好，但这可能是另一天...

Answer 1

通过给 .items display: flex; flex-wrap: wrap; 你的 item 将变成弹性项目并从左到右流动并在没有更多 space 时换行。

然后你给 .item display: flex; flex-direction: column;，这将使它们也成为一个弹性容器，并且通过使用列方向，它的子元素将像块元素一样垂直流动。

最后你给出 .item__content flex: 1;，这将使它垂直占据任何剩余的 space，因此每一行的 item 将具有相同的高度。

Updated codepen

堆栈片段

.items {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
}

.item {
  display: flex;
  flex-direction: column;
  width: 25%;
  box-sizing: border-box;
  vertical-align: top;
  padding: 0 12px;
  margin: 24px -4px 24px 0;
}

@media (max-width: 600px) {
  .item {
    width: 50%;
  }
}

.item__heading {
  background-color: #d4d0f5;
  padding: 10px;
  text-align: center;
  border: 1px solid #bbbbbb;
}

.item__content {
  flex: 1 1 auto;                   /* IE need 1 1 auto */
  padding: 10px;
  border-left: 1px solid #bbbbbb;
  border-right: 1px solid #bbbbbb;
}

.item__price {
  background-color: #e0f6d9;
  padding: 10px;
  text-align: center;
  border: 1px solid #bbbbbb;
}

<div class="items">

  <div class="item">
    <div class="item__heading">
      Item 1
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__price">
      £99.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 2
    </div>
    <div class="item__content">
      Some content that is longer than other items on the same row and sets the height of this section
    </div>
    <div class="item__price">
      £69.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 3
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__price">
      £69.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 4
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__price">
      £109.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 5
    </div>
    <div class="item__content">
      Some content that is a medium kind of length blah blah
    </div>
    <div class="item__price">
      £29.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 6
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__price">
      £99.99
    </div>
  </div>

</div>

CSS 在响应式网格上设置 "same height" 行部分的唯一解决方案

CSS only solution to set "same height" row sections on a responsive grid

html

css

flexbox

css-grid