网格包装器

网格包装器模式对于在中央包装器内对齐网格内容以及允许项目断开并对齐到包含元素或页面的边缘非常有用。

要求

放置在网格上的项目应该能够对齐到水平居中的最大宽度包装器或网格的外边缘，或者两者兼而有之。

方法

做出的选择

此示例使用 CSS 网格 minmax() 函数在 grid-template-columns 属性中定义网格轨道大小。对于具有最大宽度的中央列，我们可以设置一个最小值（0 或更大）和一个指定列轨道将增长到的最大值。使用 相对 或 绝对 <length> 单位（像素、em、rem）将为中央包装器创建固定最大尺寸，而使用 <percentage> 值或 视口单位 将导致包装器根据其上下文增长或缩小。

最外侧的两列的最大尺寸为 1fr，这意味着它们将分别扩展以填充网格容器中剩余的可用空间。

有用的回退或替代方法

要将网格水平居中在页面上，您可以设置一个 max-width 以及左右 auto margin。

css
.grid {
  max-width: 96vw; /* Limits the width to 96% of the width of the viewport */
  margin: 0 auto; /* horizontally centers the container */
}

无障碍访问问题

尽管 CSS 网格允许在任何位置（在合理的范围内）定位项目，但确保您的底层标记遵循逻辑顺序非常重要（有关更多详细信息，请参阅 CSS 网格布局和无障碍性）。

另请参阅