嘿，我来帮你搞定这个问题！你尝试的几个方法要么不符合CSS规则，要么没抓住Grid布局里元素间距的核心，所以才没效果。先给你分析下为什么之前的方法失效：

• grid-gap（现在标准写法是gap）不允许使用负值，浏览器会直接忽略grid-gap: -10px这个无效声明；
• .bottom的height: calc(100% - 10px)没用，因为Grid行的高度由grid-template-rows和内容共同决定，1fr会让行平分容器高度，这个height设置无法改变行与行之间的间距；
• top: -10px需要元素是定位元素（比如设置position: relative/absolute）才能生效，默认的静态定位下这个属性完全不起作用。

可行的解决方案 #

这里给你几个简单有效的方法，按需选择：

方法1：用负margin直接拉近元素间距

Grid容器里的子元素是块级的Grid Item，直接给.bottom设置负的上外边距，就能快速拉近和上方元素的距离：

.container { display: inline-grid; grid-template-rows: 1fr 1fr; }
.top { grid-row: 1; font-size: 18px; }
.bottom { grid-row: 2; font-size: 14px; margin-top: -10px; /* 关键：负上外边距 */ }

方法2：调整行高与Grid行的高度规则

如果你不需要1fr平分容器高度，可以让行高由内容决定，再缩小内容的行高来减少空白：

.container { 
  display: inline-grid; 
  grid-template-rows: auto auto; /* 行高由内容自适应 */
  gap: 0; /* 移除Grid默认的行间距 */
}
.top { font-size: 18px; line-height: 1.2; /* 缩小内容行高，减少内部空白 */ }
.bottom { font-size: 14px; line-height: 1.2; }

也可以直接给Grid行设置固定的小高度，精准控制间距：

.container { display: inline-grid; grid-template-rows: 20px 16px; }
.top { font-size: 18px; }
.bottom { font-size: 14px; }

方法3：让Grid内容向上对齐

如果必须保留1fr的行高设置，可以通过align-items让内容在网格行内向上对齐，减少视觉上的间距：

.container { 
  display: inline-grid; 
  grid-template-rows: 1fr 1fr; 
  align-items: start; /* 让内容在网格行顶部对齐 */
}
.top { font-size: 18px; }
.bottom { font-size: 14px; }

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