Grid布局下如何将列背景延伸至浏览器左边缘？

你提到的linear-gradient hack确实能临时解决问题，但碰到图片背景这类复杂场景就失效了。我给你两个更健壮的解决方案，完全避开hack，适配所有背景类型：

方案一：用伪元素实现全屏左侧背景 #

这个思路是给section加一个伪元素，让它占满整个视口左侧的宽度，然后让Grid第一列的背景透明，把伪元素的背景透出来。不管是纯色、渐变还是图片背景，都能完美适配。

保持原有HTML结构不变 #

<main> 
  <section> 
    <div class="container"> 
      <header> 
        <h1>Hey There!</h1> 
      </header> 
      <div> 
        <h2>Column 2</h2> 
      </div> 
      <div> 
        <h2>Column 3</h2> 
      </div> 
    </div> 
  </section> 
</main>

修改后的CSS代码 #

main { 
  min-width: 800px; 
} 
section { 
  position: relative; /* 给伪元素提供定位基准 */
  border-bottom: 1px solid #dfdfdf;
}
/* 伪元素实现左满宽背景 */
section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw; /* 占满整个视口宽度 */
  height: 100%;
  background-color: #dfdfdf; /* 换成图片的话直接写 background-image: url('你的图片路径'); */
  z-index: -1; /* 把背景放在内容下方，不遮挡文字 */
}
.container { 
  width: 500px; 
  margin: 0 auto; 
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
} 
section > * { 
  min-height: 200px; 
} 
.container > div, .container > header {
  background-color: #fff; 
  padding-left: 30px; 
}
/* 让第一列（header）背景透明，透出伪元素的背景 */
.container > header {
  background-color: transparent;
}

方案二：给第一列设置负外边距 #

这个方法更直接，通过给第一列元素设置负的左外边距，让它的背景直接延伸到视口左边缘，再用内边距把内容拉回容器的范围内，避免内容溢出。

关键CSS修改部分 #

main { 
  min-width: 800px; 
} 
section { 
  border-bottom: 1px solid #dfdfdf;
  overflow: hidden; /* 防止负外边距触发横向滚动条 */
}
.container { 
  width: 500px; 
  margin: 0 auto; 
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
} 
section > * { 
  min-height: 200px; 
} 
.container > div { 
  background-color: #fff; 
  padding-left: 30px; 
}
/* 核心：让第一列背景延伸出去，内容保持在容器内 */
.container > header {
  background-color: #dfdfdf;
  margin-left: -100vw; /* 向左拉到视口最左侧 */
  padding-left: 100vw; /* 把内容推回原来的位置 */
}

两个方案的适用场景 #

• 方案一适合需要给整个section左侧统一设置背景的情况，背景样式更灵活；
• 方案二更轻量化，只针对第一列元素，适合单独给第一列定制背景的场景。

两种方法都完全避开了hack，能完美应对图片背景等复杂需求，你可以根据自己的实际场景选择~

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