我有一个商品清单。我需要在一个二维列表中显示它们。每件商品都有子元素:photo、title、description、price和buy button，这些元素的大小和位置必须是这样的：商品行中的所有title、description、price和photo必须位于相同的y坐标位置，并且高度为一行中对应高度元素的最大值。

Ive尝试：“grid-template-rows:1fr 1fr 1fr 1fr 30px；”为了使一行中的所有子元素在相同的y-位置，但我需要它们的高度适合内容，并不高于一行中的最大元素。 附言。您可以使用flex或任何您想要的方式提供代码。

代码

---

顺晟科技：

可以说，您可以实现同样的事情，尽管它有点痛苦。

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

的情况下实现这一点

一点点JavaScript就能帮上忙。通过获取最大高度，可以将其定义到所有类

目前无法使用任何CSS布局方法(2019/06)*。

解决了这个问题，但是浏览器对它的非实验性采用仍然有限。*

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

支持@caniuse.com

--

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

来自Rachel Andrew（CSS-Grid envangalist）的两个参考资料链接

1. https://rachelandrew.co.uk/archives/2019/04/16/css-subgrid-news-and-demos/

和

1. YouTube视频on subgrid

2. 和另一个

结果输出（FF每晚）