隐藏CSS Grid行后如何消除行间多余间距？

这个问题的核心原因是：你用显式网格轨道（通过grid-template-rows或grid-template-areas定义）容纳了要隐藏的行，即使隐藏了网格项，显式轨道本身仍然存在，导致轨道之间的grid-gap会叠加。比如你定义的第二行是显式行，隐藏hideRow后，第一行与第二行的10px gap、第二行与第三行的10px gap依然存在，加起来就变成了20px的间距。

下面是两种可行的解决方案：

方案1：改用隐式网格布局（无需JS） #

放弃用grid-template-areas和固定的grid-template-rows定义所有行，而是通过grid-column控制每个项的列跨度，让行自动生成。这样当hideRow被display: none隐藏时，它对应的隐式行会被自动折叠，grid-gap也只会保留相邻有效行之间的10px。

修改后的CSS代码：

.content {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 保持4列布局 */
  grid-gap: 10px;
}

.content > * { 
  background: green; 
  padding: 10px; 
}

.Header{ 
  grid-column: 1 / -1; /* 占满所有列，对应原第一行 */
}

.hideRow{ 
  grid-column: 1 / -1; /* 占满所有列，对应原第二行 */
  /* 需要隐藏时添加 display: none; */
}

.first{ 
  grid-column: 1 / 3; /* 占前2列 */
}

.second{ 
  grid-column: 3 / -1; /* 占后2列 */
}

.third{ 
  grid-column: 1 / 3;
}

.fourth{ 
  grid-column: 3 / -1;
}

.fifth{ 
  grid-column: 1 / -1; /* 如果需要占满一行的话 */
}

HTML部分保持不变，当需要隐藏hideRow时，直接给它加display: none即可，此时Header和first之间只会有10px的间距。

方案2：用CSS类切换显式网格布局（适合需要精确控制行结构的场景） #

如果你必须保留显式网格的定义，可以通过给容器添加/移除CSS类来动态调整网格的行结构，隐藏hideRow的同时移除对应的显式行。

CSS代码：

.content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  /* 默认隐藏hideRow的布局 */
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "Header Header Header Header"
    "first first second second"
    "third third fourth fourth";
}

/* 当需要显示hideRow时，给容器添加这个类 */
.content.show-hiderow {
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "Header Header Header Header"
    "hideRow hideRow hideRow hideRow"
    "first first second second"
    "third third fourth fourth";
}

.content > * { 
  background: green; 
  padding: 10px; 
}

.Header{ grid-area: Header; }
.hideRow{ grid-area: hideRow; }
.first{ grid-area: first; }
.second{ grid-area: second; }
.third{ grid-area: third; }
.fourth{ grid-area: fourth; }
.fifth{ grid-area: fifth; }

然后根据服务器响应，动态给.content容器添加或移除show-hiderow类：

• 显示hideRow时：添加show-hiderow类，网格会包含第二行
• 隐藏hideRow时：移除show-hiderow类，网格布局中不再有第二行，Header和first之间自然只有10px的gap

这两种方案都能解决你遇到的问题，方案1更简洁无需额外JS操作，方案2适合需要严格控制网格行结构的场景，你可以根据自己的项目需求选择。

内容的提问来源于stack exchange，提问作者skyshine