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

Question

我目前正在研究一个小型项目，在该项目中，我需要为该项目的移动版本创建一个自适应的“ CSS-GRID” 布局。

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

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

我需要知道，还有其他更好的替代方法吗？

Answer 1

您问的很好笑。我只是在想这个。实际上，我很想提出一个最佳的桌面->移动响应式转换。我的第一种方法是简单地使用 margin：auto; ，这并不奇怪，它的工作原理与在其他任何元素上一样：

这是您的传统设置。 CSS网格也是如此（假设您的grid-template-columns为 1fr 800px 1fr

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

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

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

除此之外，我真的想不起其他任何东西。我实际上喜欢1fr边框，尤其是如果它们留出5-10像素的边距时，我认为它们会使页面看起来更好。但这只是一个人的意见。

这种css grid article的浮动使我最大程度地了解了它的工作原理。希望对您有所帮助。干杯。