列和最大公约数 | CSS-Tricks

我最近正在为一些列创建 CSS。列需要适应一些预先确定的宽度。出于某种原因（也许是因为世界上每个网格框架都是这样），我的思绪立即转向尝试找到一个通用的构建块大小。所有列的大小要么是单个构建块的大小，要么是构建块的倍数，并添加了间距宽度。

你知道我的意思

所以我有一系列需要适应的大小，我需要弄清楚这个基础构建块是什么。我心想：“这难道不像是最低公分母之类的东西吗？”好吧，不是，但它很相似。我正在寻找的是最大公约数。也就是说，可以均匀地构建这些列的最大构建块。

用数学方式表示最大公约数表达式的形式为：gcd(n₁, n₂, n₃ 等)

首先我尝试了 OS X 的聚焦搜索，因为它有时可以解决数学问题。但这个不行。使用 Google 搜索框也不行。幸运的是，Wolfram|Alpha 可以！

column-calc-1 — 这是一个示例，展示了一系列所需的列宽以及如何获得有用的公约数。

不幸的是，当我运行我的特定数字集时，最大公约数是 5。5 个像素。这小于计划的间距。我不想考虑编写一个 192 列网格框架的 CSS。

两种选择

在这种特定情况下，我看到有两个选择

1) 调整这些宽度

告诉负责提供这些目标宽度的人员出现的问题。没有一个合理的通用构建块。它们为什么是这样的？它们能否调整以适应更合理的通用构建块？这可能带来一些好处，例如清晰的视觉一致性。

2) 算了吧

还有另一个问题：我们为什么需要基础构建块？我认为它对于超灵活的布局很有用（例如，纽约时报需要具备的功能）。我实际上从未在内容如此复杂和丰富的网站上工作过，因此我几乎没有第一手经验。

在我的情况下，网格审核已经完成。我们已经定义了所需的网格。与其创建整个复杂的网格框架以适应这几个所需网格的需求，不如编写非常具体的 CSS 来定义这些网格。

哪种方式？

那么哪一个是正确的选择呢？获得合理的构建块大小意味着能够创建一个网格框架，该框架对于超出几个指定需求的网格非常灵活且有用。这也意味着更多的 CSS。

仅定义您需要的网格可以节省您可能永远不会使用的许多 CSS。但它也远没有那么灵活。

我想这是一种“视情况而定”的情况。

我一定会将我的特定情况的结果记录在博客中。

Jon

# 2011年11月3日

赞扬您正确地识别了最大公分母/公约数。（尽管“最低公分母”很流行，但它没有任何意义。）不过，仅使用 GCD 并不能完全满足您的需求。最多只能为您提供 GCD(间距，列大小)的起点。对于 n 列，您有 n-1 个间距。

这导致了解决问题的第三种选择：在设计两侧填充内容以减小目标宽度，以便获得更好的 GCD。例如，您可以将 960 填充两侧各 3px。这将为您提供 18 列 45px 宽和 18px 间距。

Aaron Stone

评论永久链接# 2011年11月3日

最低公分母只不过是 1。您可能是在谈论最高公分母。
Kevin

评论永久链接# 2011年11月3日

最小公倍数

Alex

# 2011年11月3日

我经常发现这些问题很难克服，我通常通过反复试验找到最佳方法。

Bryan Gruhlke

# 2011年11月3日

作为一名 CSS 设计师，我真的很喜欢超灵活框架的想法，但是当您在预算和时间线上工作时，有时您只需要专门定义这几个列。您的解决方案对我来说很有意义——为什么要花费大量时间和精力将灵活的基于网格的框架构建到永远不会使用它的网站中呢？

哦，任何涉及比简单加法更复杂的数学运算的 CSS 帖子都会获得我的点赞。

Chandu

# 2011年11月3日


// gcd utility function
// usage:
//   gcd([240, 600, 360, 1200]);
//   or with strings
//   gcd([240, '600', 360, 1200]);   
function gcd(arr) {
  if(!Array.isArray(arr)) {return undefined;}
  return arr.reduce(function (a, b, i, arr) {
    if (+a < 0) {a = -(+a);}
    if (+b  +a) {var temp = +a; a = +b; b = temp;}
    while (true) {
      a %= b;
      if (a === 0) {return b;}
      b %= a;
      if (b === 0) {return a;}
    }
  }, arr[0]);
}

Chandu

# 2011年11月3日

抱歉，我错过了替换“<”符号！


// gcd utility function
// usage:
//   gcd([240, 600, 360, 1200]);
//   or with strings
//   gcd([240, '600', 360, 1200]);   
function gcd(arr) {
  if(!Array.isArray(arr)) {return undefined;}
  return arr.reduce(function (a, b, i, arr) {
    if (+a < 0) {a = -(+a);}
    if (+b < 0) {b = -(+b);}
    if (+b > +a) {var temp = +a; a = +b; b = temp;}
    while (true) {
      a %= b;
      if (a === 0) {return b;}
      b %= a;
      if (b === 0) {return a;}
    }
  }, arr[0]);
}

谢谢。

vince

# 2011年11月3日

上周遇到了非常类似（如果不是完全相同）的情况。我正在尝试调整现有的网格系统，这时我突然想到“…你只需要两列。你在做什么？” 当一切都说完后，项目提前完成，而且我比预期的更自豪一些。因果关系，相关性？随便吧。

Hassan

# 2011年11月3日

您可以简单地使用 JavaScript 生成您的 192 列网格，并将结果附加到文档的头部。

Aaron Stone

评论永久链接# 2011年11月3日

这是一个好主意。但这是以牺牲用户可访问性为代价的。没有 JavaScript 的浏览器（非常罕见，异域浏览器）将无法获得网格。我认为根据给定的特定宽度定义网格是最好的方法。创建一个 1 列 = 5px 的 192 网格框架非常荒谬。

也许可以使用更大的数字作为列宽，然后使用一些相对定位或边距（这可能是相对定位/边距最糟糕的用法！）来适当地调整它。

此外，如果相关项目不涉及扩展网格或对网格进行任何重大更改，则特定宽度是最佳方法。

我想知道如果要适应的所有列宽的最大公约数都等于 1（例如：所有质数）（这是一个与互质数密切相关的概念），那么如何才能创建网格框架。

解决上述问题的另一个好方法是四舍五入行的特定宽度，然后找到它们的最大公约数并将其用作最小的列宽。然后使用（同样，一种不好的做法）相对定位或边距来调整任何差异。

Marco Campos

# 2011年11月3日

一个问题：您为什么要使用网格？为什么不直接使用适应用户屏幕尺寸的灵活布局呢？
如果您仔细考虑，CSS 只提供了使用 min/max-width/height 和基于百分比/em 的大小所需的工具。唯一且永恒的问题是 Internet Explorer。

Akuseru

# 2011年11月3日

我第一次看到网格系统时，就像“哦！天哪！这是天使建造的……或者上帝自己，上帝，我不知道您会用 CSS 编码……”是的，我在各种项目中使用它，通常是 960.gs…

但是过了一段时间，当您完全理解了 CSS 中的定位和显示后，最佳选择是自己创建块，这更容易、更轻，并且可以证明-给自己-可以自己做些什么。所有网格系统都很棒，当您使用媒体查询时它们会稍微复杂一些，但除此之外，我相信

1. 如果您需要创建不灵活的布局，请使用 960.gs 等网格系统（我并不是说 960.gs 不灵活，我爱 960.gs）
2. 如果您需要创建灵活的布局，但发现到处都是定位和媒体查询的困难，请使用 Skeleton 等工具
3. 如果您需要对自己的布局感到安全，那就自己动手吧 =D。

感谢 Chris

Jesse

# 2011年11月3日

说得对！先了解需求可以极大地简化和加快流程。我在最近的一个项目中也遇到了同样的情况。

如果你愿意使用计算器，你可以使用灵活的媒体技术，并创建一个完全灵活的网站。

IT Mitică

# 2011年11月4日

关于5px gcn，我想说的是，其中有一些东西让你得出了错误的结论。

你可能需要多一双眼睛。

james

# 2011年11月4日

嗨，我之前为我正在做的一个项目做了一个这个。

http://www.mediafire.com/?33twzq6ktv2as5y

Jonathan

# 2011年11月4日

我喜欢并使用网格系统，但对于大多数网站，我最终还是会构建我需要的列。终极的灵活网格对于希望在CMS所见即所得编辑器中管理自己网站的客户来说并没有用。很少有客户能够处理这么多的选择。

使用过小基本块宽度的网格系统并不是一个真正意义上的数学和CSS问题。这是一个现实世界中的设计问题。如果网格太小，就会违背其提供视觉秩序和一致性的设计目的。
当然，它仍然提供了灵活性，但position: absolute和position: relative也提供了灵活性。如果有人还记得GoLive这个程序，它尝试做一些类似于非常小增量网格的事情。不太受欢迎。

Bram

评论永久链接# 2011年11月4日

这篇关于模块化布局的文章提供了一个非常有用的示例。将最小的网格单元设置为与最小的图像一样宽。

James

# 2011年11月5日

有一些网络和桌面应用程序可以帮助计算网格大小。我一直在尝试使用https://www.designersbookshop.com/grid-calculator-basic-edition.html该网站上的其他应用程序包括InDesign的插件，我用它来制作线框图，并且它提供了极大的灵活性。

Web设计自动化

# 2011年11月6日

我的一部分总是希望在遇到这类问题时选择第二个选项。然而，更理性的想法总是占上风。

John Sweden

# 2011年11月7日

哇……这些东西让我的头脑都晕了，甚至比似乎正在各个方向吞噬简单性的“网络应用程序”垃圾堆还要让人头晕。

Julio Moreira

# 2011年11月10日

我现在是一名自由职业者，我可能会自己编写所有代码，我正在尝试使用斐波那契数列进行一些更实验性的东西。我从左到右用这个序列创建了一个到987px的网格，然后我再次用这个序列做同样的事情，这次是从右到左。结果作为网格系统来说非常奇怪，但我继续深入研究，非常喜欢最终的感觉，希望很快能与大家分享结果。干杯……

Free

# 2011年11月11日

@Chandu 谢谢老兄，你帮了我很多！

Chanel

# 2011年11月15日

非常感谢。我学到了很多有用的技能。感谢大家。

steph

# 2011年11月15日

谢谢。我目前正在做的项目真的很需要这个。

Darren @ 123 Web

# 2011年12月6日

谢谢 Chris –

Wolfram Alpha 似乎是计算GCD的一个方便的小工具。

我从未做过像纽约时报那样复杂的事情——但话虽如此，即使对于不太复杂的网站，Wolfram 也可能很方便。

当然也适用于建立框架。

非常感谢，
Darren。

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。