2017-09-01 91 views
0

儘管我知道Foundation的響應速度很快,但我試圖製作精確的具有某些斷點的photoshop文檔,並試圖瞭解基礎如何建立網格元素大小(默認情況下)。Foundation 6全寬和非全寬的默認網格寬度是多少?

假設例如// XXLarge屏幕 @media只有屏幕和(最小寬度:120.063em)的媒體查詢{}/*最小寬度1921px,xxlarge屏幕*/12列

this is my current grid which I used based on the foundation PSD that I purchased but I think it's wrong

問題1:應用默認的水槽?或者默認情況下系統不應用排水溝,只是純粹的列?

問題2:不適用的基礎外槽(或外緣)自動?

問題3:什麼是一個非全寬行考慮1920屏幕尺寸的總寬度?

問題4:什麼是柱,檐槽在這種情況下,1921年屏幕寬度的大小?

Question5:我應該如何準備我的文檔,如果我要遵循新的XY網格默認?

回答

-1
+0

我發現像盒子容器(所有列+網格)一樣的信息是1200px作爲默認考慮1920年的尺寸大小寬度,這意味着當不使用全寬度時,有一個額外的720像素的外部空間總共是360px。我的問題是關於外部排水溝或排水溝是如何創建的,我在codepen上看到了一些示例,有時看起來排水溝是跨越默認值20px的一個實體,但我已經看到它們實際上是兩個實例的示例10px來自對立列的每一邊(如填充)。但是在XY網格中呢? –

+0

上面的鏈接指向Foundation XY Grid頁面。 聽起來像你需要閱讀帶標題的部分... >天溝。 >網格容器已滿。 – ITZAP

+0

是的,我讀了這些部分,但它沒有談到外部排水溝(最後兩列的最後兩個排水溝)。注意:我不是在談論內部排水溝。我檢查了codepen上的一個代碼,看起來這些排水溝在規則網格上(而不是XY),它們甚至不是,外部排水溝是排水溝的一半大小。在這種情況下,排水溝是30px,外部排水溝是15px。 http://i.imgur.com/qpfo0Si.png - 選中此圖片。我不明白你爲什麼一直指着我的文檔,而不是試圖幫助理解信息,感覺對我來說很傲慢 –

0

除此之外被發現的文檔資料找尋你所有的問題,我發現了在新的XY網格的更多信息通過聯繫Zurb:

該XY網格是6.4+

默認情況下沒有排水溝默認的網格。單元格可以以邊距或填充的形式獲得間距 如果在單元格之間添加間距,則它將應用於每個單元格的兩側。

網格容器的默認寬度是1200px。這可以很容易地改變。您也可以創建一個流體寬度的網格。

單元格是網格容器或屏幕寬度的百分比。所以如果你使用medium-3類的網格中有4個單元格,每個單元格將佔寬度的25%。您也可以讓單元格爲自動或縮小尺寸。收縮將佔用內容的寬度,並且增長將擴大以填充剩餘空間。