构建 CSS 网格叠加

让我们看看使用 CSS 构建网格叠加需要什么。 它将是响应式的，易于自定义，并大量使用 CSS 变量（更准确地称为“CSS 自定义属性”。如果您不熟悉自定义属性，我强烈建议您阅读 CSS 变量和预处理器变量有什么区别？ 并观看 Lea Verou 关于使用它们的启发性演讲。

我们正在构建的这个网格叠加将被视为开发工具，就像一个专门针对我们，而不是针对我们用户的工具。 所以，我们不用太担心浏览器支持（如果您在意，请查看 caniuse… 自定义属性数据）。虽然不可能预处理自定义属性使其行为与原生支持完全相同，但如果您像使用预处理器变量一样使用它们，像 postCSS 插件 cssnext 这样的工具可以将它们转换为与旧版浏览器兼容的 CSS。

前言

几周前，在工作中，我简化了我们其中一个项目的媒体查询，并根据与 Flexbox Grid 相同的原则添加了一个布局组件。 我的一些同事并没有完全理解它的响应性和流畅性，所以我创建了一个可切换的网格叠加来帮助他们可视化它。

我希望这可以成为帮助我们团队进行与布局相关的对话的工具，并确保我们不会使用太多定制宽度、填充等。

术语

作为一名前端设计师，我希望所有开发人员和设计师都能使用相同的语言（尽可能），因此我为 CSS 变量选择了一个术语，该术语也是数字设计师所熟悉的

• 列：页面的垂直划分。
• 间距：列之间的间距。
• 偏移：视窗两侧之间的间距。
• 基线：用于文本的垂直韵律。

制作网格

1) “框”

让我们在元素上使用伪元素，以在所有内容之上显示网格。 我们希望叠加与流体布局一起使用，因此我们为元素提供了 `100% – (2 * 偏移量)` 的宽度，以及一个最大宽度，以便网格叠加不会比我们的布局更宽。

查看示例

2) 列

如果您查看网格，您会注意到重复模式是列+间距对。 我们使用 重复线性渐变 作为 background-image。 我们将设置 background-image 的大小为 100% + 间距，使重复模式的宽度为 100% / 列，实际列的宽度为 (100% / 列) – 间距。

查看示例

顺便说一句，我还尝试使用带有背景重复的常规线性渐变来使线条更加像素完美。 它不起作用，因为当布局宽度不能被列数整除时，像素四舍五入会导致总宽度不完美。

3) 基线

我们也使用重复线性渐变来绘制基线，但它稍微简单一些，因为我们没有添加水平间距，并且我们希望它是一条线而不是一个块。

我们还可以添加一个基线偏移变量，它允许我们稍微向上或向下偏移基线。 我们只需调整 background-position 来应用基线偏移。

查看示例

4) 媒体查询

现在我们有了基本设置，让我们介绍一些媒体查询。 如果您回顾一下我们迄今为止使用的数学公式，您会发现其中没有任何一个与特定数量的列、间距宽度等相关联。

我们使用移动优先方法，只有当我们要更改变量时才会在媒体查询中包含它们。 为了让所有使用叠加的人清楚地知道我们已经通过了一个新的断点，我们还会在每个断点处更改颜色。

我建议您在一个新标签页中打开示例，然后看看当您更改不同的变量值以及调整视窗大小时的行为。

查看示例

如果您在步骤 1 中脑海中记住了“但是如果我想在特定断点处设置特定布局宽度呢？”，那么现在您就可以通过为每个媒体查询设置 --max_width 来轻松引入这种逻辑。

5) 帮助文本

设计师喜欢考虑不同设备的模型——这通常是一件好事，因为网站在这些不同设备上看起来很棒至关重要——但有时他们会忘记 iPad 上的布局应该一直向上和/或向下工作到下一个断点。

断点通常不会被称为“iPhone”、“Galaxy Note 🔥”、“iPad”等，原因有很多，包括上述原因。 断点表示一个新范围的开始，它不是特定于设备的。

为了更清楚地显示我们断点被称为什么，我们可以将名称添加到我们的网格叠加中。

查看示例

我有一个梦想，有一天，设计师不会再回到开发人员那里说：“我们需要调整它在 iPad 上的外观”，而是说“我们需要调整它在中等屏幕上的外观”。

更进一步

列和间距的线条呢？ 容易，只是一些 CSS。 添加更多断点呢？ 容易，只是一些 CSS。 如果我想使用不同的颜色呢？ 容易… 你懂的。 😄

您可以在此处查看更高级的示例

查看示例

我很乐意在这里或 GitHub 仓库 上获得您的意见，该仓库还包含使用这种方法的 Chrome 扩展。