Question

我正在尝试使用Golden Grid System网格执行响应式双列布局（内容和侧边栏），并且无法理解它。我真的很喜欢这个系统背后的想法（没有固定宽度，可缩放的基线等等），但不知道如何做列。我想在桌面上并排放置一个侧边栏和内容列，然后在侧边栏上放置侧边栏，下面是平板电脑/手机上的内容。任何帮助表示赞赏。

Answer 1

首次查看GGS时，创建列可能有点棘手，因为网站上提供的示例很难说明如何使用网格来创建列。

了解GGS最重要的一点是，它不是网格框架，它只提出列宽等建议。如果您已下载CSS，则会在评论中看到这些建议。

  Four-column grid active
  ----------------------------------------
  Margin   | #  1   2   3   4   |   Margin
  5.55555% | %  25  50  75  100 | 5.55555%



  Eight-column grid active
  ----------------------------------------------------------------------
  Margin   | #  1     2     3     4     5     6     7     8   |   Margin
  5.55555% | %  12.5  25.0  37.5  50.0  62.5  75.0  87.5  100 | 5.55555%


  Sixteen-column grid active
  ----------------------------------------------------------------------------------------------------------------------
  Margin   | #  1     2     3     4     5     6     7     8     9     10    11    12    13    14    15    16  |   Margin
  5.55555% | %  6.25  12.5  18.75 25.0  31.25 37.5  43.75 50.0  56.25 62.5  68.75 75.0  81.25 87.5  93.75 100 | 5.55555%

要创建网格，您需要选择最适合您需求的网格。假设您已选择8列网格，最简单的方法是从第一列宽度（12.5％）构建它并将其添加到后续网格列。要使其响应，只需将适当的列定义包装在对应于相应断点的媒体查询中。

请参阅小提琴示例：http://jsfiddle.net/ricebunny/C6QEu/12/

Answer 2

在您提供的页面上，您可以下载4个文件。我建议使用它们并进行调整。如果您只想进行没有固定宽度的2列布局，为什么不使用2个简单列创建自己的布局并使用百分比作为宽度？

有人可以向我解释一下Golden Grid System网格吗？

2 个答案: