摇摆网格布局上的垂直间隔太大

要解决摇摆网格布局上的垂直间隔太大的问题，你可以使用以下代码示例中的方法之一：

方法一：使用grid-auto-rows属性来设置网格行的高度。通过设置较小的值可以减小垂直间隔。

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 100px; /* 设置网格行的高度 */
  grid-gap: 20px;
}

方法二：使用grid-template-rows属性来显式地设置每一行的高度。通过设置较小的值可以减小垂直间隔。

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-template-rows: repeat(3, 100px); /* 显式设置每一行的高度 */
  grid-gap: 20px;
}

这些代码示例中，.grid-container 是包含网格项目的容器元素的选择器。grid-template-columns 属性用于设置自动调整的网格列，并且可以根据实际情况进行调整。grid-gap 属性用于设置网格项目之间的间隔。grid-auto-rows 或者 grid-template-rows 属性用于设置网格行的高度，从而控制垂直间隔的大小。