基礎 - 網格

描述

Foundation 網格系統透過頁面擴充套件到 12 列。網格系統用於透過一系列包含內容的行和列來建立頁面佈局。

網格選項

下表簡要說明了 Foundation 網格系統在多種裝置中的工作原理。

	小型裝置手機（<640px）	中型裝置平板電腦（>=640px）	大型裝置筆記型電腦和桌上型電腦（>=1200px）
網格行為	始終水平排列	開始時摺疊，在斷點以上水平排列	開始時摺疊，在斷點以上水平排列
類字首	.small-*	.medium-*	.large-*
列數	12	12	12
可巢狀	是	是	是
偏移	是	是	是
列排序	是	是	是

Foundation 網格的基本結構

以下是 Foundation 網格的基本結構：

<div class = "row">
   <div class = "small-*"></div>
   <div class = "medium-*"></div>
   <div class = "large-*"></div>
</div>

<div class = "row">
   ...
</div>

首先，建立一個 row 類來建立列的水平組。
內容應放置在列內，並且只有列可以是行的直接子元素。
網格列是透過指定您希望跨越的 12 個可用列中的數量來建立的。例如，對於四個相等的列，我們將使用 .large-3

以下是 Foundation 網格系統中使用的三個類：

序號	基本網格類和描述
1	大型 large-* 類用於大型裝置。
2	中型 medium-* 類用於中型裝置。
3	小型 small-* 類用於小型裝置。

高階網格

以下是 Foundation 中使用的高階網格格式。

序號	高階網格和描述
1	組合列/行 column 和 row 類用於同一元素，以獲取全寬列用作容器。
2	巢狀我們可以在另一個列內巢狀網格列。
3	偏移使用 large-offset-* 或 small-offset-* 類，您可以將列向右移動。
4	不完整行當行不包含多達 12 列時，Foundation 會自動將最後一個元素浮動到右側。
5	摺疊/展開行使用媒體查詢大小，將摺疊和展開類包含到行元素中以顯示填充。
6	居中列透過在列中包含 small-centered 類，您可以使列位於中心。
7	源排序源排序類用於在斷點之間切換列。
8	塊網格塊網格用於分割內容。

語義構建

使用一組 SASS 混合宏，會生成一個網格 CSS，用於構建您自己的語義網格。更多資訊，點選此處

SASS 參考

以下是 Foundation 中使用的網格的 SASS 參考。

序號	基本網格和描述
1	變數使用 Sass 變數，我們可以修改此元件的預設樣式。
2	混合宏最終的 CSS 輸出是使用混合宏構建的。

列印頁面

序號	高階網格和描述
1	組合列/行 column 和 row 類用於同一元素，以獲取全寬列用作容器。
2	巢狀我們可以在另一個列內巢狀網格列。
3	偏移使用 large-offset-* 或 small-offset-* 類，您可以將列向右移動。
4	不完整行當行不包含多達 12 列時，Foundation 會自動將最後一個元素浮動到右側。
5	摺疊/展開行使用媒體查詢大小，將摺疊和展開類包含到行元素中以顯示填充。
6	居中列透過在列中包含 small-centered 類，您可以使列位於中心。
7	源排序源排序類用於在斷點之間切換列。
8	塊網格塊網格用於分割內容。