React Transition组在过渡时添加项目，因此CSS网格中断

Question

反应过渡组在DOM中生成元素，这会在消失时破坏CSS网格。网格有6个单元格，不能有更多单元格。

转换组代码

const transitionsNames = {
    enter: classes["animation-enter"],
    enterActive: classes["animation-enter-active"],
    leave: classes["animation-leave"],
    leaveActive: classes["animation-leave-active"]
}

<ReactCSSTransitionGroup
    component={React.Fragment}
    transitionName={transitionsNames}
    transitionEnterTimeout={500}
    transitionLeaveTimeout={500}>
    {data.map(item => <Card code={item.code} element_type={"item"} key={Math.random()}/>)}
</ReactCSSTransitionGroup>

动画CSS：

.animation-enter {
  opacity: 0;
  transform: scale(0);
}

.animation-enter.animation-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: all 500ms;
}

.animation-leave {
  transform: scale(1);
  opacity: 1;
}

.animation-leave.animation-leave-active {
  opacity: 0;
  transform: scale(0);
  transition: all 500ms;
}

网格CSS：

  display: grid;
  grid-template-columns: repeat(6, 17rem);
  justify-content: center;
  grid-column-gap: 7rem;

我认为绝对定位可以做到这一点，但不知道如何做到。

我需要更改项目而不破坏网格。需要在旧项目之上生成新项目。