使用边缘到边缘网格的全宽元素

在有限的宽度容器中创建全宽元素（例如中心文本列）需要巧妙的CSS技术。一种常见的方法使用相对的左定位和基于视口宽度的负左侧边缘。尽管此方法具有局限性（例如，需要隐藏在身体上的溢出和一个以中心的容器），但它相对简单，不会干扰其他容器元素。

使用CSS网格的替代方法已被广泛讨论：

• 泰勒（Tyler）的“与CSS网格布局爆发”和雷切尔（Rachel）的回应。
• 雷切尔（Rachel）的“带有CSS网格和命名列的编辑设计模式”。
• 塞伦·戈拉（Selen Gora）的“用CSS网格将容器中的盒子设置为完全宽度”。
• 布莱恩·罗宾逊（Bryan Robinson）的“使用CSS子网格在文章模板中布局全宽的内容条纹”。

这些方法共享一个共同的假设：整个页面的边缘到边缘网格。这提出了一个问题：使用body { display: grid; }整个页面布局中，一种实用方法？尽管一些开发人员这样做，但它带来了潜在的挑战。

存在几个缺点：

1. 标题和页脚（通常是全宽元素）需要明确的放置和跨越网格的位置，与使用简单的块级元素相比，增加了复杂性。更灵活的方法可能涉及带有块级标头和页脚的中央边缘到边缘网格。
2. 将所有元素放置在中央列中（例如， article > * { grid-columns: 2 / 3; } ）以有选择地扩展某些项目会感到麻烦。对于主要集中的内容，与单独将每个元素放置在网格上的位置相比，管理布局的父元素提供了更简单，更强大的解决方案。

尽管没有固有的缺陷，但边缘到边缘的网格方法在许多布局中会感觉不太直观，并且可能更复杂。这种观察可能源于对更简单，更模块化的方法的偏爱。

避免应用display: grid;直接到达元素。将元素注入体内的浏览器扩展可能会破坏网格布局。更好的做法是使用孩子<code><div>要包含网格，可以反映反应的最佳实践，以避免直接的身体操纵，以改善范围的范围和可维护性。</div>

以上是使用边缘到边缘网格的全宽元素的详细内容。更多信息请关注PHP中文网其他相关文章！