2012-04-29 56 views
2

我正在嘗試使用Golden Grid System網格做出響應式的兩列布局(內容和側邊欄),並且無法理解它。我真的很喜歡這個系統背後的想法(沒有固定寬度,可縮放的基線等等),但不知道如何做這些列。我希望在桌面上使用側邊欄和內容欄,然後在頂部使用側邊欄,在平板電腦/移動設備上使用下面的內容。任何幫助表示讚賞。有人可以向我解釋金格系統網格嗎?

回答

0

在您提供的頁面上有4個文件,您可以下載。我會建議使用這些和適應他們。 如果你只想做一個沒有固定寬度的2列布局,爲什麼不用2個簡單的列創建你自己的佈局,並使用百分比作爲寬度?

+0

爲什麼要投票? – Lodder

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/

相關問題