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

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%) 构建它并将其添加到后续网格列。要使其响应，只需将适当的列定义包装在与适当的断点相对应的媒体查询中。

参见 fiddle 示例:http://jsfiddle.net/ricebunny/C6QEu/12/