结合Parallax视差滚动实现Grid网格布局的问题咨询

问题原因 #

1. 视差容器与内容分离：你当前定义的.parallax是独立空容器，带视差效果的背景和后续的.inParallax内容完全无关，无法实现内容跟着视差滚动的效果，且空容器未设置高度，背景本身也无法正常显示。
2. 网格列规则不符合预期：grid-template-columns: auto auto auto定义的三列中，左右两个子div为空且没有设置宽度，中间列会自动占满所有可用空间，才会出现横跨页面的白色长条。

解决方案 #

调整HTML结构将内容放入视差容器内，修改网格列定义为1fr auto 1fr，让左右两列等分剩余空间、中间列自适应内容宽度即可实现需求。

修改后代码 #

CSS

.parallax {
    background-image: url('image.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 500px; /* 按需调整视差区域高度 */
    display: grid;
    align-items: center; /* 让白色盒子在视差区域垂直居中 */
}
.inParallax {
   display: grid;
   grid-template-columns: 1fr auto 1fr; /* 左右占等量剩余空间，中间自适应 */
   width: 100%;
}

HTML

<div class="parallax">
  <div class="inParallax">
     <div></div>
     <div style="height:200px;background-color:white; padding: 0 20px;">
       <p>Text</p>
     </div>
     <div></div>
  </div>
</div>

如果需要固定中间白色盒子的宽度，直接给中间的div加上width: 你需要的宽度值即可。

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