新增的元素破坏了网格布局。

使用CSS属性grid-auto-flow设置元素的添加顺序，并使用grid-auto-rows或grid-auto-columns属性设置自动添加的元素的大小。例如：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 150px; /* 每个自动添加的元素的高度为150px */
  grid-auto-flow: dense; /* 元素在网格中的添加顺序优化布局 */
}

此外，也可以通过JavaScript动态添加元素时，指定其要添加到的位置（如指定其要添加到已有元素的下方或右侧）以保证布局的稳定性。