CSS Grid高度未随内容自适应，后续元素覆盖问题求解

问题根源 #

你的Grid容器被设置了固定高度（如height: 100vh）或绝对定位（position: absolute），这会强制容器高度被限制在固定值内，无法根据内部卡片的数量和尺寸自动扩展。当卡片数量增多超出容器高度时，内容会溢出容器，而后续元素因为容器高度没有被撑开，会直接覆盖在Grid的溢出内容上方。之前用padding-bottom临时修复的思路只适用于固定数量的卡片，一旦卡片数量变化就会失效。

解决方案 #

1. 移除限制高度的属性
   删掉Grid容器上的height: 100vh、position: absolute这类强制固定高度的属性，让容器默认采用height: auto（浏览器默认值），这样Grid会自动根据内部内容的总高度撑开容器，后续元素自然会排列在Grid下方。

   修正后的容器CSS示例：

   .grid-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
     /* 移除height: 100vh和position: absolute */
     padding: 20px; /* 可选：保留内边距美化布局 */
   }
   

2. 保留视口最小高度（可选）
   如果需要Grid容器至少占满当前视口高度，但内容超出时能自动扩展，可以用min-height: 100vh替代height: 100vh：

   .grid-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
     min-height: 100vh; /* 容器至少占满视口，内容多了自动增高 */
     padding: 20px;
   }
   

3. 检查溢出属性
   如果容器设置了overflow: hidden，会导致超出的内容被隐藏且容器高度不扩展，需要将其改为overflow: auto（内容超出时显示滚动条）或直接移除该属性。

验证效果 #

修改后，无论添加多少卡片，Grid容器都会自动适配内容高度，后续元素会始终排在Grid的底部，不会再出现覆盖问题。

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