CSS Grid在首页不生效但作品集页面正常，div重叠该如何解决？

问题根因 #

• 子元素脱离Grid布局流：你给.BGpant和.demo两个子元素都设置了position: absolute，绝对定位元素会脱离父容器的正常文档流，父元素.homePGMain设置的Grid排列、行间距规则对脱离流的元素完全不生效，两个元素默认堆叠在同一位置，就会出现重叠效果。
• 重复属性覆盖失效：.BGpant的样式里先后写了display: grid和display: flex，后者会覆盖前者的设置，你定义的Grid相关属性不会生效；.demo也重复写了两次display: grid，属于无效冗余代码。
• 父容器高度设置有问题：.homePGMain设置了height: 100%，如果它的上层父元素没有显式定义高度，这个百分比高度会失效，也会间接影响布局效果。

修复方案 #

1. 删除.BGpant和.demo样式里的position: absolute配置，让两个子元素回归正常文档流，父容器的Grid规则就能正常控制它们的排列和间距。
2. 清理重复的display属性：如果.BGpant需要用flex布局就删掉前面的display: grid，需要用Grid布局就删掉后面的display: flex，只保留你需要的布局模式即可。
3. 如果你需要首页容器占满整个视口高度，可以把.homePGMain的height: 100%修改为min-height: 100vh，不需要依赖上层父元素的高度设置就能正常生效。

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