如何删除最后一个差距网格

Question

我应该如何制作5个盒子的布局？到目前为止，这就是我所能做的。但是问题在于，网格的最后一项仍然在其下方有差距。 我只能为容器提供样式的组件。

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 {
    grid-row: 2 / span 3;
    background-color: ${({ theme }) => theme.color.secondary.$100};
  }
  & > .container-live-call-info {
    grid-row: 2 / span 3;
    background-color: ${({ theme }) => theme.color.secondary.$100};
  }
  & > .container-live-call-volume {
    grid-column: 3;
    background-color: ${({ theme }) => theme.color.secondary.$100};
  }
  & > .container-live-call-voice {
    grid-column: 3;
    background-color: ${({ theme }) => theme.color.secondary.$100};
  }
`;

      <Container>
        <div className="container-live-call"></div>
        <div className="container-live-call-map"></div>
        <div className="container-live-call-info"></div>
        <div className="container-live-call-volume"></div>
        <div className="container-live-call-voice">
          <button onClick={() => setOpen(false)}>Click me to close</button>
        </div>
      </Container>

Answer 1

.container-live-call-map和.container-live-call-info规则正在为4个行增加一个行（而不是<<<<3代码>网格 - 板行），因为它们从第2行开始，跨越了3行。如果将它们更改为：

.container  > .container-live-call-map {
    grid-row: 2 / span 2;
}
.container  > .container-live-call-info {
    grid-row: 2 / span 2;
}

这应该摆脱在网格的最后一件以下的额外行/间隙。