CSS网格：如果我要间隔一些问题，则每个网格行的最后一列都将悬停在网格列上

Question

每行最后一列悬停以添加网格列：跨度2 和网格行：跨度2

我面临着悬停中最后一列不稳定的问题。

这是我的代码。请帮我解决这个问题。谢谢

.Grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 20px;
}

.Grid-Column {
  width: 100%;
  min-height: 90px;
  background-color: gray;
  text-align: center;
}

.Grid-Column:hover {
  width: 100%;
  grid-column: span 2;
  grid-row: span 2;
}

<div class="Grid">
  <div class="Grid-Column"> <h1> One </h1> </div>
  <div class="Grid-Column"> <h1> Two </h1> </div>
  <div class="Grid-Column"> <h1> Three </h1> </div>
  <div class="Grid-Column"> <h1> Four </h1> </div>
  <div class="Grid-Column"> <h1> Five </h1> </div>
  <div class="Grid-Column"> <h1> Six </h1> </div>
  <div class="Grid-Column"> <h1> Seven </h1> </div>
  <div class="Grid-Column"> <h1> Eight </h1> </div>
  <div class="Grid-Column"> <h1> Nine </h1> </div>
  <div class="Grid-Column"> <h1> Ten </h1> </div>
</div>