Foundation 網格實例

以下我們收集了一些網格常用的實例。

三個均等列

該實例演示了如何創建三個均等列 (33.3%/33.3%/33.3%) ，在中型和大型設備上顯示三個列，在小型設備上自動堆疊：

三個不均等列

該實例演示了如何創建三個不均等列 (25%/50%/25%)，在中型和大型設備上顯示三個列，在小型設備上自動堆疊：

兩個均等列

該實例演示了如何創建兩個均等列 (50%/50%)，在小型、中型和大型設備上列的比例始終為 50%/50%：

兩個不均等列

該實例演示了如何創建兩個不均等列 (33.3%/66.6%)，在小型、中型和大型設備上列的比例始終為 33.3%/66.6%：

修改列的順序

通過使用 .small|medium|large-push-* 和 .small|medium|large-pull-* 類來修改列的順序:

嵌套列

你可以使用嵌套網格(列中插入列):

混合：手機、桌面設備

Foundation 網格系統有三個列: .small-* (手機), .medium-* (平板), 和 .large-* (桌面設備)。這些類可以動態組合使用，讓佈局更加靈活：

提示： 每個類都能放大，如果你希望小型和大型螢幕設備的寬度一樣可以設置指定 .small-*。

混合：手機、平板和桌面設備

居中列

列居中可以使用 .small-centered 類。中型和大型設備可以繼承小型設備的居中，但你需要在大型設備上設置居中類.large-centered 。

列偏移量

可以使用 .large-offset-* (或 .small-offset-*) 類設置列向右移。 左側外邊距的列數量使用 * 號控制:

不完整列

如果一行中的列數量之和不是 12 , Foundation 將自動將最後一列向右浮動，並使用空白來填充剩下的列。

可選項 .end 類用於設置最後一列的元素向左邊浮動:

寬屏

網格 (.row) 最大尺寸（ max-width）為 62.5rem。在寬屏設備上尺寸可能大於 62.5rem, 這樣列就無法完整填充頁面，即便寬度設置為 100%。但是我們可以通過 CSS 來設置新的 max-width:

如果你想使用默認的 max-width, 但是背景顏色需要跨域整個頁面，這時你在容器元素上使用 .row 類，並指定你需要的背景顏色: