【发布时间】：2017-10-23 01:43:16
【问题描述】：
需要：一个仅 CSS 的解决方案，可以在每行的基础上启用多个等高网格“部分”，这也是响应式的。
注意：这是this question 的后续问题，每个项目只有一个“等高”部分 - 这可以通过 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 解决方案，这是一个可行的选择
【问题讨论】：
-
我很确定你今天不会找到这样的纯 CSS 解决方案，而且很可能明天也不会。原因是
items__features元素不能像item的元素那样互相看到，因此无法拉伸以适应。我确实使用一个简单的脚本将a fiddle demo 放在一起来获取和附加一个样式元素，尽管它的大小是items__features元素的最大值。根据您的请求缺少的是一个调整大小事件处理程序，它会重新计算每行的最大高度，并添加一个nth-child选择器来正确定位item。 -
@LGSon 将感谢您对我下面提出的解决方案的想法/cmets，该解决方案操纵 HTML 并使用 CSS 网格
-
我稍后再看看。完成后通知您。
-
发表了答案:)