使用边到边网格创建全宽元素

如果您有一个有限宽度的容器，比如居中的文本列，“突破”该容器以创建全宽元素需要一些技巧。也许最好的技巧是使用左相对定位和基于视窗的负左边距。虽然它有一些弊端（例如，需要在 body 上隐藏溢出，容器需要居中等等），但至少它很容易实现，而且容器中的所有其他内容都可以正常运行。

关于另一种实现方法的文章有很多，涉及 CSS 网格

Tyler 的 “使用 CSS 网格布局突破”，Rachel 在她自己的文章中对此作了回复。
Rachel 在另一篇文章中介绍了这些全宽元素，“使用 CSS 网格和命名列的编辑设计模式”
Selen Gora 的 “使用 CSS 网格将容器中的框设置为全宽”
Bryan Robinson 的 “使用 CSS 子网格在文章模板中布局全宽内容条”

所有这些方法的共同点是，它们都假设您有一个边到边的网格。我一直想，人们真的会用 CSS 网格来布局整个页面吗？比如，本质上是 body { display: grid; }¹？文章本身倾向于使用一个类名，但假设该父元素是一个全浏览器宽度的容器。

我四处打听了一下，有些人低声说，“是的，我经常这样做”。所以，很酷，这是人们做的事情。我的第一个想法是，出于以下几个原因，这似乎很麻烦

典型的“页眉”和“页脚”都是全宽的，因此，与将页眉设置为位于站点顶部（或底部）的块级 <header> 相比，必须在网格上显式地放置它们并将其拉伸到正确的列数，并在调整列时保持最新，这似乎有很多工作要做。您仍然可以在中间使用边到边的网格，并在其上方和下方使用块级元素。
必须将“文章”中的所有项目显式地放置到中间列中（例如 article > * { grid-columns: 2 / 3; } 这样您才能偶尔通过跨越更多列来“拉伸”某些内容，这对我来说感觉很奇怪。就像，如果 95% 的内容都位于居中的列中，那么将这些内容放到一个处理布局的父元素中，感觉更稳健也更轻松，而不是让每个单独的元素都需要将自己放置到网格中，最终结果是它们看起来好像都在一个共享的父元素中。

我并不是在批评这项技术，只是注意到它让我感到奇怪。但我可能只是老了。

我建议不要直接在 body 元素上使用 display: grid;。一个常见问题是：浏览器扩展可能会将内容放置到 body 中的 DOM 中，这会导致这些内容被放置到您的网格中，并可能破坏您的布局。我见过这种情况。我认为这就像 React 的最佳实践，不要绑定整个 body，而是使用一个 div 子元素，它实际上是一样的，只是作用域限定在一个选择器中。

Bryan Robinson

# 2020 年 2 月 7 日

作为一个经常使用这种 CSS 模式（并且是上面提到的作者之一）的人，我还要补充一下这种设计模式的另一个缺点。请记住，我喜欢这种设计模式；)

当您使用它时，您将无法访问 float 属性。float 不适用于网格项目。现在，您可以进行一些小的解决方法，例如添加额外的标记，但这项设计模式旨在删除多余的标记。这是一个权衡，我通常愿意接受，但我确实偶尔会在我博客上想念浮动。

我要提到的另一件事是，我认为这些文章并没有假设一个全宽网格容器。我实际上在我的网站上使用这种设计模式，博客文章布局的左侧约占 80%，右侧是侧边栏。全宽的突破只发生在 80% 的范围内，这会产生一些有趣的设计元素。

Andy

# 2020 年 2 月 7 日

关于第一点，您可以使用以下方法自动跨越所有列
grid-column: 1/-1;

John

# 2020 年 2 月 7 日

啊，是的。我们有一个设计师，她从我们痛苦的哭喊声中获得病态的乐趣。

各种各样的突破，她从不歧视，可以从左右两侧突破的图像/视频，通常包含需要保持在主网格上居中的文本或 CTA 按钮。

https://codepen.io/sliver37/pen/eYmjPGj

此示例需要支持子网格的浏览器。我希望它能得到更广泛的支持。

Vanderson

# 2020 年 2 月 7 日

我尝试构建一个通用的网格结构来允许这个想法，以及有一个居中区域。我不喜欢尝试将页眉/主体/页脚全部放在一个网格中。我认为这样做没有意义。因此，我使用了 3 个独立的网格。

这是示例。它有 6 列，2 个间距列，它们缩小到两侧的 10px “边距”。然后，中心由 3 列组成。

回想起来，这里是我应该添加 12 列以形成一个完整的布局系统的地方，但我从未这样做。

–max-content-width 是用于创建最大中心列（例如 1280px）的测量值。将其除以 3 将根据屏幕宽度提供自动且可调整的列尺寸。

我相信这可以得到很大改进，但我发现它的一些方面还不够完善，我还没有重新开始。

main {
  display: grid;
 /* 
Makes 3 column center body area with centered max-width 
and collapseable gutter columns on each side that inner 
elements can expand full width into. (instead of margins: 0 auto; )
 */
  grid-template-columns: 
    minmax(10px, 1fr) 
    minmax(0, calc(var(--max-content-width) / 3)) 
    minmax(0, calc(var(--max-content-width) / 3)) 
    minmax(0, calc(var(--max-content-width) / 3)) 
    minmax(10px, 1fr);
  grid-template-areas: 
     "main-left main main main main-right";
  grid-gap: 0;
}

然后自动使所有内容适合这种结构。

main > * {
    grid-column: main;
}

要创建一个全宽内容行。

.full-width {
  grid-column: 1 / -1
}

我相信这其中有一些东西，但它确实引入了一些障碍，但在某些情况下使用起来非常容易和有趣，因为一切都非常简单地布局，全宽元素很容易插入。

这是一个示例

Tyler Sticka

# 2020 年 2 月 7 日

看到我的文章在 CSS-Tricks 上被提到，我感到非常荣幸！

我承认我对这种结论有点困惑

所有这些方法的共同点是，它们都假设您有一个边到边的网格。

我在介绍这项技术后展示一个非对称示例的目的是使它清楚地表明并非如此。也许我在基于网格的解决方案的独特之处上无意中“埋没了要点”？

Mattan Ingram

# 2020 年 2 月 7 日

我根本无法使用网格进行全页面布局，因为它在移动浏览器上无法很好地与 height: 100vh; 配合使用，而 Flex 允许您在 Flex 列上使用 flex-grow: 1，它将在不使用 100vh 的情况下进行调整。我尝试让它在 Flex 列中的网格内工作，但浏览器之间存在不一致，它似乎只在 Chrome 中工作。

Simon

# 2022 年 6 月 30 日

我不明白为什么人们会想念浮动，因为您可以使用以下方法做同样的事情
float: left; => justify-self: start;
float: right; => justify-self: end;

此评论线程已关闭。如果您需要分享重要信息，请联系我们。