如何让CSS Grid行高自适应内容？行高无法缩小问题求助

嘿，我明白你现在的困扰：你用CSS Grid做布局，想让#bottom元素贴近#top，让它们的高度随内容自动收缩，但哪怕内容很少，这两个元素还是硬占着至少1fr的高度（也就是容器的一半），auto完全没生效对吧？

问题的根源在于你没有显式定义网格行的高度。当你只通过grid-template-areas划分区域，却不设置grid-template-rows时，浏览器会自动帮你生成隐式行轨道，默认的规则是1fr 1fr——这就导致两行强制平分容器的可用高度，完全忽略了内容的实际大小。

一步解决：添加grid-template-rows: auto auto #

直接修改你的section样式，加上这行关键代码：

section { 
  display: grid; 
  grid-template-areas: "one top" "one bottom"; 
  grid-template-rows: auto auto; /* 这行是核心 */
  align-items: start; 
  border: 1px solid hotpink; 
} 
article { border: 1px solid green; } 
#one { grid-area: one; } 
#top { grid-area: top; } 
#bottom { grid-area: bottom; background: yellow; }

为什么这招管用？ #

当你把行高设为auto时，网格轨道的高度会完全由内部内容的最小需求来决定——内容多就自动撑高，内容少就收缩到刚好容纳内容的尺寸，不会像1fr那样硬抢剩余空间。这样#top和#bottom就会紧紧靠在一起，完美实现你想要的“贴近且高度自适应”的效果。

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