CSS调整网格布局下React Bootstrap Card的尺寸避免强制等高

问题原因 #

你当前使用的CSS Grid布局默认align-items属性值为stretch，会强制同一网格行内的所有网格项高度对齐到该行最高元素的高度，所以内容更少的卡片会被拉伸。

解决方法 #

只需要给外层容器.markets-container添加align-items: start属性即可，该属性会让每个网格项按照自身内容高度渲染，不会被强行拉伸。

修改后的完整.markets-container样式如下：

.markets-container {
  margin: 10px 0 0 0;
  min-height: 400px;
  max-height: 400px;
  overflow: auto;
  display: grid;
  grid-template-columns: auto auto;
  align-items: start;
  /* 可按需添加下面的行间距控制 */
  /* row-gap: 10px; */
}

修改后所有卡片都会仅展示自身内容需要的高度，不会再出现等高拉伸的问题。

内容的提问来源于stack exchange，提问作者clattenburg cake