3

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

4

2 回答 2

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/

于 2014-06-27T10:08:07.957 回答
0

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

于 2012-04-29T22:55:53.867 回答