有人可以向我解释金格系统网格吗？

问题描述：

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

答

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

为什么要投票？ – Lodder

答

当您第一次看到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/

有人可以向我解释金格系统网格吗？

相关推荐