Css 黄金比例，有无填充/边距？

假设我有一个1000像素宽的2列布局，有100像素的边沟空间（边距），左右各有50像素。。如何将黄金比例应用于此布局

方法一

c1+c2=800px;
c1/c2=1.618;
=>c1= 495px and c2= 305px

50px, column 1 (495px), 100px, column 2 (305px), 50px

方法二计算列宽，忽略边距

c1+c2=1000px
c1/c2=1.618

=>c1= 618px c2=392px

添加边距/填充后的有效列宽

c1=618px -100px = 518px
c2=392px -100px = 292px
50px, column 1 (51), 100px, column 2 (305px), 50px

% difference in two methods 518-495/518= 4%

4%的差异不会造成任何差异，但在处理狭窄布局时，%的差异会更大

如果你看到这篇文章，

在第一个例子中，他们从黄金比例中提取填充物，在另一个例子中，他们将填充物作为GR的一部分

有人能建议哪种方法更好吗

我正在为一个可定制的wordpress主题开发这个布局，我提供了一个选择流体布局的选项。 我不能使用黄金比例的第一种方法（我可以吗？？）

我可以在不失去GR为设计带来的和谐的情况下使用方法2吗

请包括支持您答案的链接和参考

---

PS：我以前在平面设计部分发布过这个问题，有人建议我在这里发布。我希望我没有违反任何规则。

我可以向您指出这篇关于黄金分割率的精彩文章：

它还包含一个链接，指向一个有用的工具，可以根据黄金分割率和其他几个分割率计算数字。为方便起见，以下是链接：

---

在两列div上使用这些选项：

.golden-ratio-horizontal-primary {
    flex: 1.618;
    // or width: 62%;
}
.golden-ratio-horizontal-secondary {
    flex: 1;
    // or width: 38%;
}

---

如果你多读一点，你会发现它是关于一切的，包括布局，而不仅仅是排版。请读到最后。最好是作为一个评论，只是一个链接到大量的一般信息