我想实现一个响应式的两列布局（内容和侧边栏），使用Golden Grid System网格，但是我对此不太理解。我非常喜欢这个系统背后的理念（没有固定宽度，可缩放的基线等等...），但不知道如何设置列。我希望在桌面上有一个侧边栏和一个内容列，然后在平板电脑/移动设备上，侧边栏在顶部，内容在下方。希望得到任何帮助。
2个回答
1
创建列在您第一次查看GGS时可能有些棘手，因为网站提供的示例很差地说明了如何使用网格来创建列。
关于GGS最重要的是要理解它不是一个网格框架，它只提出了列宽等建议。 如果您已经下载了CSS，则会发现这些建议在注释中进行了概述。
创建网格，您需要选择最适合您需求的网格。假设您选择了8列网格，最简单的方法是从第一列宽度（12.5％）开始构建，并将其添加到后续网格列中。要使其响应式，只需将适当的列定义包装在与相应断点对应的媒体查询中即可。
请参见示例：http://jsfiddle.net/ricebunny/C6QEu/12/
关于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/
- riceballthief
0
在您提供的页面上，有4个文件可供下载。我建议使用它们并进行适应性调整。
如果您只想要一个没有固定宽度的2列布局，为什么不自己创建一个具有2个简单列的布局，并使用百分比作为宽度呢？
- Lodder
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接