【发布时间】：2021-08-17 00:18:37
【问题描述】：
我有一份商品清单。我需要在二维列表中显示它们。每个商品都有子元素：照片、标题、描述、价格和购买按钮，它们的大小和位置必须以这种方式：商品行中的所有标题、描述、价格和照片必须位于相同的 y 坐标位置，并且具有高度为一行中对应高度元素的最大值。
我试过这个：“grid-template-rows: 1fr 1fr 1fr 1fr 30px;”使一行中的所有子元素都处于相同的 y 位置，但我需要它们的高度以适应内容并且不高于一行中的最大元素。 附言您可以使用 flex 或任何您想要的方式提供代码。
代码
.Grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat( auto-fill, 280px);
}
.loon-card {
grid-template-rows: 1fr 1fr 1fr 1fr 30px;
display: grid;
grid-gap: 10px;
border: 1px solid #ddd;
padding: 10px;
}
.long-description {
border-top: 1px solid #ddd;
}<div class="Grid">
<div class="loon-card">
<img src="">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
<div class='price'>12.00$</div>
<button>buy</button>
</div>
<div class="loon-card">
<img src="">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
<br/>Title:5
<br/>Title:6
<br/>Title:7
<br/>Title:8
<br/>Title:9
<br/>Title:10
<br/>Title:2
<br/>Title:3
<br/>Title:4
<br/>Title:5
<br/>Title:6
<br/>Title:7
<br/>Title:8
<br/>Title:9
<br/>Title:10
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
<div class='price'>12.00$</div>
<button>buy</button>
</div>
<div class="loon-card">
<img src="">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
<div class='price'>14.00$</div>
<button>buy</button>
</div>
<div class="loon-card">
<img src="">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
<div class='price'>15.00$</div>
<button>buy</button>
</div>
</div>【问题讨论】：