CSS Grid布局中替换文本后保持Div占位的实现方案（无需指定行高）

嘿，这个场景我太熟悉了！当你用jQuery的.text()把N/A替换成空内容时，Grid里的div会因为失去文本的行高支撑而坍缩，导致高度和有文本的容器不一致。不用逐个指定行高的话，这几个方案应该能帮到你：

方案1：用非断空格作为占位符 #

最直接的办法是不要把文本完全清空，而是替换成非断空格（Unicode值\u00A0）。它和普通文本一样会继承字体的行高，能完美保留容器原本的高度，视觉上又不会显示内容：

$(document).ready(function() {
  $('div.grid-item').filter(':contains("N/A")').text('\u00A0');
});

这种方式不需要改CSS，纯JS就能解决，适配各种Grid布局。

方案2：用CSS的min-height配合相对单位 #

如果你的Grid行高度是基于文本行高的，可以给Grid项设置min-height，用em单位（相对于字体大小）来保证至少占据一行文本的高度：

.grid-item {
  /* 数值和你的line-height保持一致，比如line-height:1.6就设1.6em */
  min-height: 1.6em;
}

之后不管你把文本换成空还是其他内容，min-height都会强制容器保持至少一行文本的高度，不用硬写固定像素值，适配不同字体大小和设备。

方案3：CSS伪元素占位（视觉隐藏但保留高度） #

如果不想修改文本内容（比如要留空但需要语义化），可以给符合条件的容器加个类，用伪元素插入不可见的占位符：

$(document).ready(function() {
  $('div.grid-item')
    .filter(':contains("N/A")')
    .addClass('empty-grid-item')
    .text('');
});

对应的CSS：

.empty-grid-item::after {
  content: '\u00A0';
  visibility: hidden; /* 占位但不显示 */
}

伪元素会继承容器的字体样式，撑出和正常文本一样的高度，视觉上容器是空的，但布局高度完全一致。

额外小提示 #

如果你的Grid用了grid-auto-rows属性，可以尝试把它设置为minmax(auto, 1fr)，让行高自动适配内容的最小高度，再配合上面的方案效果会更好。

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