需要：一个仅 CSS 的解决方案，可以在每行的基础上启用多个等高网格“部分”，这也是响应式的。
注意：这是这个问题的后续问题，每个项目只有一个“等高”部分 - 这可以通过 flexbox 实现
下图应该有助于解释要求：
“项目网格”应该是响应式的 - 因为它可以根据视口宽度显示每行不同数量的卡片（桌面上 4 个，移动设备上 2 个）。在给定的行内，等效的“内容”和“功能”部分应该具有相同的高度。
在下面的 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__features {
padding: 10px;
border-top: 1px solid #bbbbbb;
border-left: 1px solid #bbbbbb;
border-right: 1px solid #bbbbbb;
background-color: #f7cbb1;
}
.item__features ul {
margin: 0px;
}
.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__features">
<ul>
<li>feature 1</li>
</ul>
</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 as it spans many more lines than the rest of the other content sections on this row
</div>
<div class="item__features">
<ul>
<li>feature 1</li>
</ul>
</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__features">
<ul>
<li>feature 1</li> <li>feature 2</li>
<li>feature 3</li>
</ul>
</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__features">
<ul>
<li>feature 1</li>
</ul>
</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__features">
<ul>
<li>feature 1</li>
</ul>
</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__features">
<ul>
<li>feature 1</li>
<li>feature 2</li>
</ul>
</div>
<div class="item__price">
£99.99
</div>
</div>
</div>我创建了以下 codepen 作为基于 JavaScript 的解决方案，实现了预期的结果 - 但如果可能的话，我希望用 CSS 解决方案替换它：http: //codepen.io/rusta/pen/xdmdxm
限制
- 网格列表中要显示的项目数可以是 1-n 中的任意数字
- 要显示的“内容”和“功能”部分的大小将是真正可变的（因此不能选择“合理的”最小高度）
基于 Flexbox 的解决方案似乎无法应对项目有多个需要对齐的部分这一事实
我希望新的 CSS Grid 系统能够帮助实现上述目标，但我在这方面做了几次尝试，但都没有成功，所以我打开社区看看我是否遗漏了什么
进一步说明：我说的是纯 CSS 解决方案，我的意思是非 JS 解决方案。如果 HTML 块需要更改（订单/嵌套/类名）以支持非 JS 解决方案，这是一个可行的选择