Foundation 6 全宽和非全宽的默认网格宽度是多少？答案

【问题标题】：What are the default grid widths for Foundation 6 full width and non full-width?Foundation 6 全宽和非全宽的默认网格宽度是多少？
【发布时间】：2018-02-10 23:56:53
【问题描述】：

尽管我知道 Foundation 是响应式的，但我仍在尝试使用某些断点制作精确的 Photoshop 文档，并尝试了解 Foundation 如何建立网格元素大小（默认情况下）。

假设一个媒体查询 // XXLarge 屏幕 @media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screen */ 12 columns

问题1：默认情况下是否应用装订线？还是默认情况下系统不应用装订线，只应用纯列？

问题2：基础是否自动应用外边距（或外边距）？

问题 3：考虑到 1920 的屏幕尺寸，非全宽行的总宽度是多少？

问题4：在这种屏幕宽度为 1921 的情况下，列、间距的大小是多少？

问题 5：如果我想使用新的 XY 网格遵循默认设置，我应该如何准备文档？

【问题讨论】：

标签： html css zurb-foundation

【解决方案1】：

通过阅读Foundation for Sites 6 Docs >>找到所有问题的答案

【讨论】：

我发现了一些信息，例如盒子容器（所有列+网格）默认为 1200px，考虑到尺寸尺寸宽度为 1920，这意味着当不使用全宽时，还有一个额外的总共 720 像素或每个 360 像素的外层空间。我的问题是关于外排水沟或排水沟是如何创建的，我在 codepen 上看到了一些示例，有时似乎排水沟是一个实体，默认跨度为 20px，但我已经看到了它们实际上是两个实例的示例来自相对列的每一侧的 10 像素（如填充）。但是在 XY 网格中呢？
上面的链接指向 Foundation XY Grid 页面。听起来您需要阅读标题 ... > 排水沟的部分。 > 网格容器已满。
是的，我阅读了这些部分，但它没有谈论外部排水沟（最后两列的最后两个排水沟）。注意：我不是在谈论内部排水沟。我检查了 codepen 上的代码，似乎规则网格（不是 XY）上的这些排水沟不均匀，外部排水沟的大小是排水沟的一半。在这种情况下，装订线是 30px ，外部装订线是 15px 。 i.imgur.com/qpfo0Si.png - 检查这张图片。我不明白你为什么一直指着我看文档而不是试图帮助理解信息，这对我来说感觉就像傲慢

【解决方案2】：

除了发现的文档信息外，我还通过联系 Zurb 了解了有关新 XY 网格的更多信息：

XY 网格是 6.4+ 中的默认网格

默认情况下没有排水沟。单元格可以通过边距或填充的形式获得间距如果在单元格之间添加间距，它将应用于每个单元格的两侧。

grid-container 的默认宽度是 1200px。这可以很容易地改变。您也可以创建一个流动宽度的网格。

单元格是网格容器或屏幕宽度的百分比。因此，如果您在使用 medium-3 类的网格中有 4 个单元格，则每个单元格将是宽度的 25%。您还可以将单元格设置为自动或缩小尺寸。 Shrink 会占用里面内容的宽度，而 grow 会扩大以填满剩余空间。

【讨论】：