如何在CSS Grid中动态修改网格行数？

嘿，我明白你遇到的困扰了——用display: none隐藏.username文本后，对应的网格行却还留着空位置，这确实挺恼人的。其实核心问题在于你可能没找准要隐藏的目标，或者Grid的行定义方式让空轨道留了下来，下面给你几个针对性的解决办法：

1. 直接移除/隐藏整个网格项（最推荐） #

如果用户名所在的行只包含这个元素，那别只隐藏文本，要把整个Grid项从布局里去掉。在React/Redux里你可以通过条件渲染直接不渲染这个网格项，比用CSS隐藏更彻底：

<div className="grid-container">
  {/* 其他网格内容 */}
  {shouldShowUsername && (
    <div className="username-row">
      <span className="username">{username}</span>
    </div>
  )}
</div>

这种方式下，当shouldShowUsername为false时，这个网格项根本不会出现在DOM里，Grid自然会自动调整行数，完全不会有空行残留。

如果非要用CSS控制，那把display: none加到整个网格项容器上，而不是.username文本元素：

.username-row.hidden {
  display: none;
}

然后在React里根据变量给容器加上hidden类就行。

2. 用visibility: collapse处理必须保留DOM的情况 #

如果你因为某些原因必须把用户名元素留在DOM里，那试试visibility: collapse这个专门针对Grid/表格轨道的属性：

.username-row {
  visibility: collapse;
}

它和display: none的区别是：元素依然在DOM中，但会完全让出Grid轨道的空间，不会像visibility: hidden那样还留着占位。

3. 检查你的Grid行定义 #

如果上面的方法都没用，你得看看Grid容器的行设置是不是固定死了比如：

.grid-container {
  display: grid;
  grid-template-rows: repeat(4, auto); /* 固定了4行 */
}

这种情况下就算某一行没有内容，轨道还是会存在。这时候你需要把行定义改成自适应的，比如用grid-auto-rows: auto，让Grid根据实际存在的项自动生成行数。

为啥之前的display: none没效果？ #

大概率是因为你只隐藏了.username这个文本元素，它只是网格项的子节点——父级的网格项容器还在DOM里，自然会占据Grid的行空间。所以关键是要把整个网格项从布局中移除，而不是只隐藏里面的文本。

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