如何使CSS Grid的grid-rows占用最小空间？新手布局求助

嘿，我刚看了你的问题，其实你离正确答案已经很近了！问题的核心不是grid-template-rows里的auto，而是Grid容器默认的对齐方式在搞鬼。

你当前的代码里，grid-template-rows: auto auto 1fr 1fr理论上前两个auto应该自动适配内容高度，但Grid容器默认的align-items: stretch会让每个网格项拉伸填满整个行高，这就导致date和head所在的行被强行拉长，看起来和其他行平分空间了。

给你两个关键调整，就能完美解决：

• 给Grid容器加上align-items: start，让所有网格项在单元格内顶部对齐，不再被拉伸
• 把前两行的auto换成min-content（可选，但更明确），确保行高严格匹配内容的最小高度

修改后的代码示例：

.grid-container {
  display: grid;
  grid-template: 
    'img date' 
    'img head' 
    'img sub' 
    'desc desc';
  grid-template-rows: min-content min-content 1fr 1fr;
  align-items: start; /* 这是解决问题的核心 */
}

解释下为什么这么做：

• min-content会让行高刚好容纳内容的最小尺寸，比auto更精准，避免一些浏览器的默认样式干扰
• align-items: start直接改变了网格项在单元格内的对齐方式，从默认的拉伸变成顶部对齐，这样date和head所在的行就只会占用内容实际需要的空间，不会被多余的空白填充

之前你尝试固定高度的方案不够灵活，一旦内容长度变化（比如不同设备的文字换行），就会出现内容溢出或者留白的问题，而上面的方案是自适应的，能完美适配各种内容情况。

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