如何在嵌套Grid布局中实现full bleed（视口通栏）？

要让带full-bleed类的元素从视口一端延伸到另一端，核心问题是子元素无法突破父级Grid的边界——原代码里full-bleed是design-grid的子元素，它最多只能占满design-grid的4列，没法跨到外层wrapper-grid的左右1fr区域。

调整思路很简单：把full-bleed元素从design-grid中移出，和design-grid同级，直接作为wrapper-grid的子元素。这样它就能直接利用外层Grid的列定义实现全屏宽度，同时不影响design-grid的内部布局。

修改后的代码 #

CSS：

.wrapper-grid {
  display: grid;
  grid-template-columns: 1fr min(65ch, 100%) 1fr;
  row-gap: 1rem;
}

.design-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  /* 让design-grid占满wrapper-grid的中间列 */
  grid-column: 2;
}

.full-bleed {
  grid-column: 1 / -1;
  height: 40px;
  background-color: #f1f1f1;
}

.item {
  height: 40px;
  background-color: #f1f1f1;
}

HTML：

<body class="wrapper-grid">
  <div class="design-grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <!-- 将full-bleed元素移到design-grid同级 -->
  <div class="full-bleed">This item goes to both edges of the viewport</div>
  <div class="design-grid">
    <div class="item"></div>
  </div>
</body>

补充说明 #

• 如果需要保持design-grid的视觉连续感，可将非全屏内容拆分为多个design-grid容器，中间插入full-bleed元素即可，既不破坏布局逻辑，又能实现全屏效果。
• 全程依赖Grid布局实现，无需使用绝对定位，完全符合需求。

内容的提问来源于stack exchange，提问作者Rogier de Ruijter