CSS 网格每个元素的高度相等，保持响应性

Question

我有网格，每个元素下面都有一个图像和其他 div。因为它是一个网格，所以每个元素都有响应宽度，因此它会随着屏幕缩小而自动缩放。我希望元素的图像（可以具有不同的尺寸并且不是同质的）具有相同的高度，同时保持这种响应功能。如果我设置特定高度，随着屏幕缩小，宽高比将不会保持。基本上我需要 YouTube 风格的响应能力，这是一个完美的例子。我该怎么办？

这是我的网格：

JSX：

<div className="home-container">
  {elements.map((el) => (
    <Element el={el}></Element >
  ))}
</div>

CSS：

.home-container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-left: 250px;
  grid-auto-rows: 1fr;
  grid-row-gap: 30px;
}

这是我的元素卡：

JSX：

<div className="element-container">
   <div className="element-img">
      <img src={imageUrl} alt={title} />
   </div>
   <div>...</div>
   <div>...</div>
</div>

CSS：

.element-container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: fit-content;
  border-radius: 10px;
  overflow: hidden;
}

.element-img {
  display: flex;
  margin-bottom: 20px;
}

.element-img > img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
}

Answer 1

要使用 CSS 网格制作等高列，请使用 grid-auto-rows: 1fr; 将一行中的所有网格项设置为最高列的高度；规则。要使列全部具有相同的宽度，请使用 grid-template-columns: 1fr 1fr 1fr;规则并使用与列数相同数量的小数值。

在 HTML 代码中：

<div class="grid">
    <div>A</div>
    <div>A<br>B<br>C</div>
    <div>A<br>B</div> 
</div>

CSS 规则：

.grid {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
}

.grid > div:nth-child(1) {
    background-color: #f97171;
}
.grid > div:nth-child(2) {
    background-color: #f99e50;
}
.grid > div:nth-child(3) {
    background-color: #f5d55f;
}