使用“CSS-Grid”，如何在不使用 Margin: auto; 的情况下处理边距？答案

【问题标题】：Using "CSS-Grid", how do you deal with side margins without using Margin: auto;?使用“CSS-Grid”，如何在不使用 Margin: auto; 的情况下处理边距？
【发布时间】：2018-08-20 23:54:16
【问题描述】：

我目前正在处理一个小项目，我需要为该项目的移动版本创建响应式 “CSS - GRID” 布局。

我注意到除了 margin: auto; 之外，创建边框的唯一方法是使用中间列 20 或更多 FR 的 1fr 单位。

示例：grid-template-columns: 1fr 20fr 1fr;（此方法使边框在移动设备上自动消失）。

我想知道，有没有更好的替代方法？

【问题讨论】：

这个方法不会让边框消失，但是非常小
实际上，根据设备的屏幕分辨率和中间内容的不同，1fr 有时可能相当于 0px。
@FacundoCorradini （你可能已经删除了你的评论，因为它刚刚消失了。无论如何......这个问题一开始也让我很生气。但是，我想我明白他来自哪里...我认为他的意思是，当涉及到响应式转换（移动设备上的大边距看起来很丑）时，这只是我的看法。
所以...网格容器上的 max-width 和 margin auto 不工作吗？
根据我的经验，他们确实......不过，有些人认为这不是纯粹的 css 网格方法。（特别是因为网格本身有一个 minmax 指令。）

标签： html css

【解决方案1】：

你问的很有趣。我自己*只是在想这个。事实上，我正在尝试提出一个最佳桌面 -> 移动响应式过渡。我的第一个方法是简单地使用 margin: auto; 毫不奇怪，它就像在任何其他元素上一样工作：

这是您的传统设置。 CSS 网格也是如此（假设您的网格模板列是 1fr 800px 1fr

此桌面“中间列”设置没有任何问题。当您开始缩减到移动设备和智能手机时，问题就出现了：

在移动设备上，您不再需要较大的边距。所以你只剩下1fr的权利了吗？我个人的解决方案是简单地删除 margin: auto 并依赖 1fr 作为边框...但这仅在您的中间列设置为 20/30fr 时有效，您必须直观地使用值以获得最佳结果：

这似乎是大多数人使用的解决方案。网格是完全不同的思维方式，你不再是在“像素完美”的设计中思考，而是相对于其他元素思考。

除此之外，我真的想不出别的了。我实际上喜欢 1fr 边框，特别是如果它们留下 5-10 像素的边距，我认为它们会使页面看起来更好。但这只是一个人的看法。

这个css grid article 漂浮在周围，最能帮助我了解它是如何工作的。希望它有所帮助。干杯。

【讨论】：