Css 对齐不同块的子元素

我有一份商品清单。我需要在二维列表中显示它们。每个瓷器都有子元素：照片、标题、描述、价格和购买按钮，这些子元素的大小和位置必须是这样的：一个瓷器行中的所有标题、描述、价格和照片必须位于相同的y坐标位置，并且具有一行中相应高度元素的最大高度

我尝试过这样做：“网格模板行：1fr 1fr 1fr 1fr 30px；”以使一行中的所有子元素处于相同的y位置，但我需要它们的高度来适应内容，并且不高于一行中的最大元素。 另外，您可以使用flex或任何您想要的方式提供代码

代码

.Grid{
显示：网格；
栅隙：10px；
网格模板列：重复（自动填充，280px）；
}
·龙卡{
网格模板行：1fr 1fr 1fr 30px；
显示：网格；
栅隙：10px；
边框：1px实心#ddd；
填充：10px；
}
.长描述{
边框顶部：1px实心#ddd；
}

标题：1

标题：2

标题：3

标题：4
Lorem ipsum dolor sit amet，是一位杰出的献身者。毛里斯阿尔库酒店。Donec和lorem ac nulla scelerisque egestas。
12.00$
购买
标题：1

标题：2

标题：3

标题：4

标题：5

标题：6

标题：7

标题：8

标题：9

标题：10

标题：2

标题：3

标题：4

标题：5

标题：6

标题：7

标题：8

标题：9

标题：10
Lorem ipsum dolor sit amet，是一位杰出的献身者。毛里斯阿尔库酒店。Donec和lorem ac nulla scelerisque egestas。Lorem ipsum dolor sit amet，是一位杰出的献身者。毛里斯阿尔库酒店。Donec和lorem ac nulla scelerisque egestas。
Lorem ipsum dolor sit amet，是一位杰出的献身者。毛里斯阿尔库酒店。Donec和lorem ac nulla scelerisque egestas。Lorem ipsum dolor sit amet，是一位杰出的献身者。毛里斯阿尔库酒店。Donec和lorem ac nulla scelerisque egestas。
12.00$
购买
标题：1

标题：2

标题：3

标题：4
Lorem ipsum dolor sit amet，是一位杰出的献身者。毛里斯阿尔库酒店。Donec和lorem ac nulla scelerisque egestas。
14.00$
购买
标题：1

标题：2

标题：3

标题：4
Lorem ipsum dolor sit amet，是一位杰出的献身者。毛里斯阿尔库酒店。Donec和lorem ac nulla scelerisque egestas。
15.00$
购买

目前（2019/06）*任何CSS布局方法都不可能做到这一点

display:subgrid

解决了这个问题，但它限制了浏览器的非实验性采用*

*[2019/12更新]-子网格现在在Firefox 71中提供

--

默认情况下，它在Firefox71+中启用，因此可以进行测试。在完全采用之前，需要使用Javascript来均衡元素高度

来自Rachel Andrew（CSS网格环境学家）的两个参考资料链接

及

关于子网格

*{margin:0；padding:0；框大小：border-box；}:：before，：：after{box size:inherit；}
.电网{
显示：网格；
宽度：90%；
保证金：自动；
栅隙：10px；
网格模板列：重复（自动填充，280px）；
}
·龙卡{
显示：网格；
网格行：span 5；/*因为每个卡中有5个卡组件*/
网格模板行：子网格；
边框：1px实心#ddd；
填充：10px；
}
.长描述{
边框顶部：1px实心#ddd；
}
.价格{
填充：.5em；
文本对齐：居中；
}
img{
最大宽度：100%；
显示：块；
}

标题：1

标题：2

标题：3

标题：4
Lorem ipsum dolor sit amet，是一位杰出的献身者。毛里斯阿尔库酒店。Donec和lorem ac nulla scelerisque egestas。
12.00$
购买
标题：1

标题：2

标题：3

标题：4

标题：5

标题：6
Lorem ipsum dolor sit amet，是一位杰出的献身者。毛里斯阿尔库酒店。Donec和lorem ac nulla scelerisque egestas。Lorem ipsum dolor sit amet，是一位杰出的献身者。毛里斯阿尔库酒店。Donec和lorem ac nulla scelerisque egestas。
Lorem ipsum dolor sit amet，是一位杰出的献身者。毛里斯阿尔库酒店。Donec和lorem ac nulla scelerisque egestas。Lorem ipsum dolor sit amet，是一位杰出的献身者。毛里斯阿尔库酒店。Donec和lorem ac nulla scelerisque egestas。
12.00$
购买
标题：1

标题：2

标题：3

标题：4
Lorem ipsum dolor sit amet，是一位杰出的献身者。毛里斯阿尔库酒店。Donec和lorem ac nulla scelerisque egestas。
14.00$
购买
标题：1

标题：2

标题：3

标题：4
Lorem ipsum dolor sit amet，是一位杰出的献身者。毛里斯阿尔库酒店。Donec和lorem ac nulla scelerisque egestas。
15.00$
购买

可以说，没有

子网格

也可以实现同样的目标，尽管这有点痛苦

在我的示例中，我没有更改HTML，所以我使用

display:contents

将子对象提升到DOM树的一个级别。但是，如果您可以更改标记并且不介意由此产生的混乱，那么您也可以在不使用

display:contents

的情况下实现这一点

.Grid{
显示：网格；
栅隙：10px；
}
·龙卡{
显示：内容；
}
img{
宽度：100%；
网格行开始：1；
}
.简短描述{
网格行开始：2；
}
.长描述{
网格行开始：3；
}
.价格{
网格行开始：4；
}