如何在 css 网格中使不同高度的内容具有相同的高度？

Question

我正在创建一个垂直的单列列表。 有些文本是 200 个字符长，有些是 1 个字符。 并且列表宽度动态变化。

我如何动态地使每个高度相同？

所有条件都在下面。

• 没有伸展。 如果边距只有两块，请将它们放在顶部。
• 如果它超出屏幕，则必须是可滚动的。
• 将高度与最大单元格匹配。

有办法使高度统一为 200px，但我不喜欢它，因为它不是动态的。 当我们将每个高度设置为 200px 时，如果我们改变列表的宽度，布局就会被破坏。

这是现在。 如您所见，红色和蓝色的高度不同。 我希望这些都是一样的。

.grid {
  height: 100vh;
  overflow: scroll;
  display: grid;
  grid-template-rows: repeat(auto-fill, auto);
  grid-template-columns: 1fr;
}

https://jsfiddle.net/msickpaler/Lndmjc46/17/

Answer 1

将网格模板行更改为

grid-auto-rows: 1fr;

这应该自动使它们成为最高项目的所有高度。

在这里详细回答

Answer 2

尝试这个：

.grid {
   height: 100vh;
   overflow: scroll;
   display: grid;
   /* grid-template-rows: 100px 100px; */
   grid-template-rows: repeat(auto-fill, minmax(100px, 1fr));
   grid-template-columns: 1fr;
}

.long-text {
   background-color: red;
}

.short-text {
   background-color: blue;
}