如何去除CSS Grid布局末尾元素下方的多余间隙

算力阿峰

2026-8-29

Grid布局底部多余间隙修复方案

问题根因

你的Grid行规则定义和元素跨区配置不匹配：

显式定义的行只有3行：grid-template-rows: 5fr 0.75fr 1fr
但给.container-live-call-map和.container-live-call-info设置了grid-row: 2 / span 3，代表从第2行开始跨3行，会触发Grid自动创建额外的隐式行，底部的多余间隙就是隐式空行+gap间距叠加出来的。
右侧两个小区块没有明确指定行位置，自动排版时也会加剧布局偏移。

目标布局结构对应参考：
布局效果截图

修复后完整样式代码

const Container = styled('div')`
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 2fr 3fr 1fr;
  grid-template-rows: 5fr 0.75fr 1fr;
  gap: 10px;
  & > div {
    min-height: 20px;
  }
  & > .container-live-call {
    grid-column: 1 / span 3;
    background-color: ${({ theme }) => theme.color.secondary.$100};
  }
  & > .container-live-call-map {
    /* 从第2行开始跨2行，刚好覆盖剩余2个显式行，不会生成隐式空行 */
    grid-row: 2 / span 2;
    background-color: ${({ theme }) => theme.color.secondary.$100};
  }
  & > .container-live-call-info {
    grid-row: 2 / span 2;
    background-color: ${({ theme }) => theme.color.secondary.$100};
  }
  & > .container-live-call-volume {
    grid-column: 3;
    grid-row: 2; /* 明确指定在第二行位置 */
    background-color: ${({ theme }) => theme.color.secondary.$100};
  }
  & > .container-live-call-voice {
    grid-column: 3;
    grid-row: 3; /* 明确指定在第三行位置 */
    background-color: ${({ theme }) => theme.color.secondary.$100};
  }
`;