Html 设置多个“；相同高度”；响应网格上的行截面

需要：一种仅支持CSS的解决方案，可以在每行的基础上启用多个等高网格“部分”，这也是一种响应性很强的解决方案

注：这是一个后续问题，每个项目只有一个“等高”部分-可通过flexbox实现

下图有助于解释要求：

“项目网格”应该是响应性的，因为它可以根据视口宽度显示每行不同数量的卡片（桌面上4张，移动设备上2张）。在给定行中，等效的“内容”和“功能”部分应具有相同的高度

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

.items{
最大宽度：1200px；
}
.项目{
宽度：25%；
框大小：边框框；
显示：内联块；
垂直对齐：顶部；
填充：0 12px；
保证金：24px-4px24px 0；
}
@介质（最大宽度：600px）{
.项目{
宽度：50%；
}
}
.项目标题{
背景色：#d4d0f5；
填充：10px；
文本对齐：居中；
边框：1px实心#bbbbbb；
}
.项目内容{
填充：10px；
左边框：1px实心#bbbbbb；
右边框：1px实心#bbbbbb；
}
.项目功能{
填充：10px；
边框顶部：1px实心#bbbbbb；
左边框：1px实心#bbbbbb；
右边框：1px实心#bbbbbb；
背景色：#f7cbb1；
}
.项目特征{
边际：0px；
}
.项目价格{
背景色：#e0f6d9；
填充：10px；
文本对齐：居中；
边框：1px实心#bbbbbb；
}

项目1
一些不太长的内容

特征1

£99.99
项目2
某些内容比同一行中的其他项目长，并设置此节的高度，因为它跨越的行数比此行中其他内容节的行数多

特征1

£69.99
项目3
一些不太长的内容

功能1
功能2
专题3

£69.99
项目4
一些不太长的内容

特征1

£109.99
项目5
有些内容是中等长度的废话

特征1

£29.99
项目6
一些不太长的内容

特征1
专题2

£99.99

我正在为我自己的问题提供一个答案-但如果有其他人想出更好的答案，我会暂缓接受，因为这个答案无疑会打破一些可访问性规则，并且几乎不可能为不支持CSS网格但

如果您将HTML内容项分成四个块，那么就可以使用CSS网格样式规则实现所需的结果，而不需要JavaScript

.items{
最大宽度：1200px；
}
.项目标题{
边缘顶部：30px；
背景色：#d4d0f5；
填充：10px；
文本对齐：居中；
边框：1px实心#bbbbbb；
}
.项目内容{
填充：10px；
左边框：1px实心#bbbbbb；
右边框：1px实心#bbbbbb；
}
.项目功能{
填充：10px；
边框顶部：1px实心#bbbbbb；
左边框：1px实心#bbbbbb；
右边框：1px实心#bbbbbb；
背景色：#f7cbb1；
}
.项目价格{
背景色：#e0f6d9；
填充：10px；
文本对齐：居中；
边框：1px实心#bbbbbb；
}
/*桌面网格*/
/*桌面列布局-4列，一行*/
.项目四块{
显示：网格；
网格模板柱：2%22.5%2%22.5%2%22.5%2%22.5%2%22.5%2%；
}
.项目-1{
网格列开始：2；
网格柱端：3；
}
.项目-2{
网格列开始：4；
网格柱端：5；
}
.项目-3{
网格列开始：6；
网格柱端：7；
}
.项目-4{
网格列开始：8；
网格柱端：9；
}
/*行布局-所有4个项目一行*/
.项目标题{
网格行开始：1；
网格行端：2；
}
.项目内容{
网格行开始：2；
网格行端：3；
}
.项目功能{
网格行开始：3；
网格行端：4；
}
.项目价格{
网格行开始：4；
网格行端：5；
}
/*移动网格*/
@介质（最大宽度：600px）{
/*移动列布局-2列2行*/
.项目四块{
显示：网格；
网格模板列：6%41%6%41%6%；
}
.第1项、.第3项{
网格列开始：2；
网格柱端：3；
}
.第2项、.第4项{
网格列开始：4；
网格柱端：5；
}
/*移动行布局-两组行*/
/*第一行集合*/
.项目-1.项目标题，.项目-2.项目标题{
网格行开始：1；
网格行端：2；
}
.item-1.item\u内容、.item-2.item\u内容{
网格行开始：2；
网格行端：3；
}
.item-1.item\uuuuu特征、.item-2.item\uuuu特征{
网格行开始：3；
网格行端：4；
}
.项目-1.项目价格，.项目-2.项目价格{
网格行开始：4；
网格行端：5；
}
/*第二行集合*/
.项目-3.项目标题，.项目-4.项目标题{
网格行开始：6；
网格行端：7；
}
.项目-3.项目内容，.项目-4.项目内容{
网格行开始：7；
网格行端：8；
}
.item-3.item\uuuu特征、.item-4.item\uuu特征{
网格行开始：8；
网格行端：9；
}
.项目-3.项目价格，.项目-4.项目价格{
网格行开始：9；
网格行端：10；
}
}

项目1
项目2
项目3
项目4
一些