如何实现CSS Grid布局左侧边距匹配container且右侧图片占满视口

要实现网格左侧与.container对齐，同时图片从所在列延伸至视口末端，可采用网格居中+绝对定位突破宽度限制的方案，具体实现如下：

核心思路 #

1. 让.grid继承.container的最大宽度和居中规则，保证内容区域左侧与容器严格对齐
2. 通过绝对定位让图片容器从网格第二列的左边缘开始，直接延伸至视口右侧
3. 同步图片容器与内容列的高度，避免布局塌陷

完整SCSS代码 #

:root {
  --container-max-width: 127rem;
  --grid-gap: 3rem;
}

.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  /* 小屏幕下添加内边距保证留白统一 */
  padding: 0 2rem;
}

.grid {
  max-width: var(--container-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: var(--grid-gap);
  position: relative;
  min-height: 100%;

  &__content-wrapper {
    padding: 0 2rem;
  }

  &__image-wrapper {
    position: absolute;
    top: 0;
    /* 精准定位到网格第二列左边缘：网格中线 + 间隙的一半 */
    left: calc(50% + var(--grid-gap)/2);
    right: 0;
    height: 100%;
  }

  &__img {
    display: block;
    width: 100%;
    height: 100%;
    /* 保持图片比例并填充容器，可按需改为contain */
    object-fit: cover;
  }
}

代码说明 #

• 变量复用：用CSS变量统一管理容器宽度和网格间隙，后续修改只需调整变量值，维护更高效
• 网格对齐：.grid与.container使用相同的最大宽度和居中规则，确保内容区域左侧留白和容器完全一致
• 图片容器定位：left: calc(50% + var(--grid-gap)/2)精准定位到第二列起始位置，right: 0强制容器右侧贴合视口，实现图片从列起始位置延伸到屏幕边缘的效果
• 图片适配：object-fit: cover保证图片按比例填充容器，避免拉伸变形；若需要完整显示图片，可替换为object-fit: contain

可选小屏幕适配 #

如果需要在移动端让图片占满整行，添加以下媒体查询：

@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
    position: static;

    &__image-wrapper {
      position: static;
      height: auto;
      margin-top: var(--grid-gap);
    }
  }
}

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