如何实现卡片高度不一仍保持行间距统一的Grid布局（Styled Components）

你的核心问题出在grid-auto-rows: minmax(0, 1fr)这个设置上——它会强制所有自动生成的行高保持相等比例，导致不同高度的卡片所在行的间距被打乱。调整方式很简单：

修改Grid容器样式 #

把grid-auto-rows的值从minmax(0, 1fr)改为auto，让行高根据卡片内容自动适配，同时保留gap: 30px来统一控制行列间距：

export const Wrapper = styled.div`
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px; /* 统一控制所有卡片间的行列间距 */
  grid-auto-rows: auto; /* 行高随内容自动调整 */
`;

卡片样式可以保留（或微调） #

你的Card样式已经是自适应内容高度的，height: fit-content和flex布局的设置没问题，可以继续使用：

export const Card = styled.div`
  background: #ffffff;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  justify-content: space-between;
  height: fit-content; /* 保持卡片高度适配内容 */
`;

原理说明 #

• grid-auto-rows: auto会让Grid根据每行中最高的卡片来设置行高，这样不同高度的卡片所在行的高度自然适配内容，gap设置的30px就会在任意两行之间保持统一的间距。
• 原代码的minmax(0, 1fr)会强制所有行高按均等比例分配，哪怕卡片内容高度不同，也会被拉伸或压缩，导致行间距视觉上不一致。

如果需要实现更复杂的马赛克布局（比如部分卡片跨多行），可以给特定卡片添加grid-row: span N属性（N为跨的行数），比如：

// 给需要跨2行的卡片添加样式
export const TallCard = styled(Card)`
  grid-row: span 2;
`;

这样布局会更灵活，同时依然能保持统一的gap间距。

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