全出血

我们之前已经介绍过一些技巧，可以用来在受约束宽度的列中创建全宽度元素，例如在较窄的文本列中创建边缘到边缘的图像。 有很多技巧。

也许我最喜欢的是这个小小的实用程序类

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

这是有效的，只要列居中，并且您不介意在列（或主体）上隐藏overflow-x（否则这可能会触发水平溢出）。

最近有一些关于其他想法的来回讨论…

Josh Comeau 博客 说，您可以设置一个三列网格，并且主要将内容放置在中间列中，但也可以有机会突破它

.wrapper {
  display: grid;
  grid-template-columns:
    1fr
    min(65ch, 100%)
    1fr;
}
.wrapper > * {
  grid-column: 2;
}
.full-bleed {
  width: 100%;
  grid-column: 1 / -1;
}

我认为这很聪明。我可能会使用它。但我承认有一些让我感觉奇怪的地方。例如…

• 现在容器中的所有内容都是网格元素。这不是什么大问题，但元素的行为会略有不同。例如，没有 边距折叠。
• 您必须将所需的默认行为应用于每个元素。元素不会自然地堆叠在一起，您必须选择它们并告诉它们去哪里，然后让它们自己堆叠。感觉不像只是顺着网络的纹理走。然后您仍然需要一个实用程序类来执行全出血行为。

我真正喜欢这个想法的地方是它为您提供了这个文字网格来使用。例如，您的左侧间隔符可以是右侧宽度的一半，这完全没问题。它正在设置那个空间以供潜在使用，就像 Ethan 在他的 关于受约束网格的文章 中提到的那样。

Kilian Valkhof 回复 了这篇文章，提出了这个想法

body > *:not(img):not(video) { 
  position: relative;
  max-width: 40rem;
  margin: auto;
}

同样非常聪明。这限制了所有内容的宽度（在任何容器中，它不需要是主体）除了您想突破的元素（这也可以是一个实用程序类，并且不一定局限于图像和视频）。

同样，对我来说，这种感觉，即我必须选择每个元素并提供有关布局的基本信息，感觉有点奇怪。不是说“不要使用它”的奇怪，只是我不习惯这么做。从历史上看，我更习惯于调整容器的大小和位置，并让容器中的内容在没有更多指令的情况下自行布局。

你知道我最喜欢什么吗？我们有这么多强大的 CSS 布局工具，我们可以就如何准确地实现我们想要的效果进行讨论其优缺点。