Foundation for Sites6.8.1 變更日誌
元件清單

網格

使用預設的 12 欄、可巢狀的 Foundation 網格，快速輕鬆地建立強大的多裝置版面。如果您熟悉網格系統，您會覺得很上手。如果不熟悉，您很快就會學會。

匯入

**從 Foundation v6.4 開始，Float Grid 已預設停用**，由新的 [XY Grid](xy-grid.html) 取代。除非你需要支援 IE 10，否則建議使用 XY Grid。

要在 Foundation v6.4+ 中使用 Float Grid，你需要

  • 在 CDN 連結或套件管理員中：匯入 foundation-float.css 取代 foundation.css。
  • 在 Sass 中：將 $xy-grid 和 $global-flexbox 都設定為 false。

基礎

從新增一個具有 .row 類別的元素開始。這將建立一個水平區塊，用於包含垂直欄位。然後在該列中新增具有 .column 類別的元素。使用 .small-#、.medium-# 和 .large-# 類別指定每個欄位的寬度。

Foundation 是行動裝置優先。先為小螢幕編寫程式碼，較大的裝置將繼承這些樣式。視需要為較大的螢幕自訂。

在影片中觀看此部分

預設情況下，.column 有別名 .columns（請參閱 `$grid-column-alias` 選項）—唯一的區別是語法。

停用別名可以將 Foundation CSS 檔案大小減少 3% 到 5%。如果未使用別名，建議這樣做。

edit on codepen button 
<div class="row">
  <div class="columns small-2 large-4"><!-- ... --></div>
  <div class="columns small-4 large-4"><!-- ... --></div>
  <div class="columns small-6 large-4"><!-- ... --></div>
</div>
<div class="row">
  <div class="columns large-3"><!-- ... --></div>
  <div class="columns large-6"><!-- ... --></div>
  <div class="columns large-3"><!-- ... --></div>
</div>
<div class="row">
  <div class="columns small-6 large-2"><!-- ... --></div>
  <div class="columns small-6 large-8"><!-- ... --></div>
  <div class="columns small-12 large-2"><!-- ... --></div>
</div>
<div class="row">
  <div class="columns small-3"><!-- ... --></div>
  <div class="columns small-9"><!-- ... --></div>
</div>
<div class="row">
  <div class="columns large-4"><!-- ... --></div>
  <div class="columns large-8"><!-- ... --></div>
</div>
<div class="row">
  <div class="columns small-6 large-5"><!-- ... --></div>
  <div class="columns small-6 large-7"><!-- ... --></div>
</div>
<div class="row">
  <div class="columns large-6"><!-- ... --></div>
  <div class="columns large-6"><!-- ... --></div>
</div>
24
4
64
全3
全6
全3
62
68
全2
3
9
全4
全8
65
67
全6
全6

小格線

小格線擴充到大型螢幕比大型格線擠進小螢幕容易。

在影片中觀看此部分

edit on codepen button 
<div class="row">
  <div class="columns small-2">2</div>
  <div class="columns small-10">10</div>
</div>
<div class="row">
  <div class="columns small-3">3</div>
  <div class="columns small-9">9</div>
</div>
2
10
3
9

中型格線

中型螢幕將繼承小型螢幕的樣式，除非你使用中型格線類別指定不同的版面。

在影片中觀看此部分

edit on codepen button 
<div class="row">
  <div class="columns medium-2">2</div>
  <div class="columns medium-10">10</div>
</div>
<div class="row">
  <div class="columns medium-3">3</div>
  <div class="columns medium-9">9</div>
</div>
2
10
3
9

進階

合併欄/列

如果您只有一個欄，您可以將 .row 和 .column 類別合併在同一個元素上，以節省一些標記。您仍然可以像往常一樣在這個容器內嵌套更多的網格。

欄列可以使用尺寸類別，例如 .small-8，但僅在用作頂層容器時可以使用，而不是在嵌套在另一列中時使用。

edit on codepen button 
<div class="column row">
  Row column
</div>
列欄

流動列

通常，列總是 1200 像素寬。透過新增 .expanded 類別，讓列完全流動。

在影片中觀看此部分

edit on codepen button 
<div class="expanded row">
</div>

巢狀

您可以無限期地嵌套網格，儘管在某個時候會變得荒謬。

在影片中觀看此部分

edit on codepen button 
<div class="row">
  <div class="columns small-8">8
    <div class="row">
      <div class="columns small-8">8 Nested
        <div class="row">
          <div class="columns small-8">8 Nested Again</div>
          <div class="columns small-4">4</div>
        </div>
      </div>
      <div class="columns small-4">4</div>
    </div>
  </div>
  <div class="columns small-4">4</div>
</div>
8
8 巢狀
8 再次巢狀
4
4
4

偏移

使用 .large-offset-1 和 .small-offset-3 等類別，將區塊向右移動最多 11 個欄。

在影片中觀看此部分

edit on codepen button 
<div class="row">
  <div class="columns large-1">1</div>
  <div class="columns large-11">11</div>
</div>
<div class="row">
  <div class="columns large-1">1</div>
  <div class="columns large-10 large-offset-1">10, offset 1</div>
</div>
<div class="row">
  <div class="columns large-1">1</div>
  <div class="columns large-9 large-offset-2">9, offset 2</div>
</div>
<div class="row">
  <div class="columns large-1">1</div>
  <div class="columns large-8 large-offset-3">8, offset 3</div>
</div>
1
11
1
10，偏移 1
1
9，偏移 2
1
8，偏移 3

不完整的列

為了解決瀏覽器不同的捨入行為，Foundation 會將列中的最後一欄右浮動，以便邊緣對齊。如果您的列沒有加起來等於 12 欄的數量，您可以使用 .end 類別標記最後一欄，以覆寫該行為。或者，您可以將 $grid-column-align-edge 變數設定為 false，以完全關閉此行為。

edit on codepen button 
<div class="row">
  <div class="columns medium-3">3</div>
  <div class="columns medium-3">3</div>
  <div class="columns medium-3">3</div>
</div>
<div class="row">
  <div class="columns medium-3">3</div>
  <div class="columns medium-3">3</div>
  <div class="columns medium-3 end">3 end</div>
</div>
3
3
3
3
3
3 end

間距

回應式間距

網格間距（一行中兩個欄之間的空間，以及網格邊緣與頁面邊緣之間的空間）具有回應性，並且在較大的螢幕上會變大。

中斷點 間距大小
小 20px
中 30px

如果您使用 Foundation 的 Sass 版本，您可以透過編輯 $grid-column-gutter 變數對應來變更這些預設值

$grid-column-gutter: (
  small: 20px,
  medium: 30px,
);

若要新增更多間距定義，請在對應中新增新行。這裡使用的中斷點名稱必須與專案的 $breakpoints 對應中的中斷點名稱相符。

靜態間距

如果您偏好對每個中斷點使用一個間距大小，請僅對 $grid-column-gutter 變數使用一個數字

$grid-column-gutter: 30px;

您也可以透過新增 .gutter-[大小] 類別，明確設定特定網格列的間隙大小。當您使用回應式間隙，但特定元件需要靜態間隙時，這會很有用。

<div class="row gutter-small">
  <div class="columns">This grid always has small gutters</div>
</div>

收合/展開列

.collapse 類別讓您可以移除欄位間隙（內距）。

有時您可能不希望每個媒體查詢都收合或展開。在這種情況下，請使用您想要的媒體查詢大小，並收合或展開，然後將其新增到您的列元素。範例顯示在小型和中型的間隙，以及在大型和更大的畫面上沒有間隙。

edit on codepen button 
<div class="row medium-uncollapse large-collapse">
  <div class="columns small-6">
    Removes gutter at large media query
  </div>
  <div class="columns small-6">
    Removes gutter at large media query
  </div>
</div>

將瀏覽器縮小到中型大小，即可看到差異。

在小螢幕上，我有間隙！

在中型螢幕上，我有間隙！

在大型螢幕上，我沒有間隙！

在小螢幕上，我有間隙！

在中型螢幕上，我有間隙！

在大型螢幕上，我沒有間隙！

置中欄位

透過在您的欄位中新增 .small-centered 類別，將您的欄位置中。大型欄位會預設繼承小型欄位的置中，但您也可以透過套用 .large-centered 類別，僅在大型欄位上置中。若要在大型螢幕上取消置中，請使用 .large-uncentered。

在影片中觀看此部分

edit on codepen button 
<div class="row">
  <div class="columns small-3 small-centered">3 centered</div>
</div>
<div class="row">
  <div class="columns small-6 large-centered">6 centered</div>
</div>
<div class="row">
  <div class="columns small-9 small-centered large-uncentered">9 centered</div>
</div>
<div class="row">
  <div class="columns small-11 small-centered">11 centered</div>
</div>
3 個置中
6 個置中，大型
9 個置中，小型
11 個置中

來源順序

使用這些來源順序類別，您可以在我們的斷點之間移動欄位。這表示，如果您在小型顯示器上將次要導覽列置於主要內容下方，您可以在大型顯示器上選擇將次要導覽列定位在頁面的左側或右側。在您要套用樣式的裝置大小之前，加上推入/拉出的前綴。您將會使用 .medium-push-#、.large-push-# 語法。使用數字 0 來重設推入/拉出，例如 .medium-push-0 或 .large-pull-0。

在影片中觀看此部分

edit on codepen button 
<div class="row">
  <div class="columns small-10 small-push-2">10</div>
  <div class="columns small-2 small-pull-10">2, last</div>
</div>
<div class="row">
  <div class="columns large-9 large-push-3">9</div>
  <div class="columns large-3 large-pull-9">3, last</div>
</div>
<div class="row">
  <div class="columns large-8 large-push-4">8</div>
  <div class="columns large-4 large-pull-8">4, last</div>
</div>
<div class="row">
  <div class="columns small-5 small-push-7 medium-7 medium-push-5">7</div>
  <div class="columns small-7 small-pull-5 medium-5 medium-pull-7">5, last</div>
</div>
<div class="row">
  <div class="columns medium-6 medium-push-6">6</div>
  <div class="columns medium-6 medium-pull-6">6, last</div>
</div>
10
2，最後
9
3，最後
8
4，最後
7
5，最後
6
6，最後

區塊網格

區塊網格是一種建立大小相等欄位的簡便方法。新增 .[大小]-up-[n] 格式的類別，以變更列中的欄位數量。預設情況下，您可以在區塊網格中使用的最大欄位數量為 8。在欄位中新增 .column-block 類別，將套用等於間隙寬度的底部邊距。

在影片中觀看此部分

edit on codepen button 
<div class="row small-up-2 medium-up-3 large-up-4">
  <div class="column column-block">
    <img src="https://placehold.it/600x600" class="thumbnail" alt="">
  </div>
  <div class="column column-block">
    <img src="https://placehold.it/600x600" class="thumbnail" alt="">
  </div>
  <div class="column column-block">
    <img src="https://placehold.it/600x600" class="thumbnail" alt="">
  </div>
  <div class="column column-block">
    <img src="https://placehold.it/600x600" class="thumbnail" alt="">
  </div>
  <div class="column column-block">
    <img src="https://placehold.it/600x600" class="thumbnail" alt="">
  </div>
  <div class="column column-block">
    <img src="https://placehold.it/600x600" class="thumbnail" alt="">
  </div>
</div>

以語義方式建立

我們的網格 CSS 是使用一組強大的 Sass 混入產生的，您可以在自己的程式碼中使用這些混入，以建立語義網格。

列

使用 grid-row() 混入來建立列。

.container {
  @include grid-row;
}

欄位

使用 grid-column() 混入來建立欄位。有許多方法可以定義欄位的寬度。

.main-content {
  // Use the full column count (100%)
  @include grid-column;

  // Use a column count (33%);
  @include grid-column(4);

  // Use a percentage (15%)
  @include grid-column(15%);

  // Use a custom fraction (20%)
  @include grid-column(1 of 5);
}

網格欄位計算器也可以作為一個函數存取。這會提供百分比值，而不會有任何網格欄位 CSS。

.main-content {
  width: grid-column(1 of 7);
}

要以語義方式置中欄位。使用 ´grid-column-position(center);´。

.centered-column {
  @include grid-column-position(center);
}

多個網格

預設情況下，所有網格都使用 $grid-column-count 變數設定的欄位數。不過，這可以在列的執行個體中選擇性地覆寫。

在此範例中，網格是 16 欄，而不是一般的 12 欄。混合中的任何欄位數學參照都將使用新的欄位數。

.container {
  @include grid-row(16) {
    .main-content {
      // 11/16 = 68.75%
      @include grid-column(11);
    }

    .sidebar {
      // 5/16 = 31.25%
      @include grid-column(5);
    }
  }
}

您也可以使用 grid-context() 混合，暫時變更網格內容，而不會輸出任何列 CSS。

@include grid-context(7) {
  .sidebar {
    @include grid-column(4);
  }
}

從調整大小到偏移量到來源排序，每個其他網格功能也可以透過混合存取。將它們與 breakpoint() 混合配對，讓您的網格具有回應性。

請參閱以下 Sass 文件，以了解每個混合如何運作。

.main-content {
  // The mixins have shorthands, too!
  @include grid-col;

  @include breakpoint(medium) {
    // Changes size only
    @include grid-col-size(8);

    // Changes position only
    @include grid-col-pos(4);
  }
}

自訂區塊網格

使用 grid-layout() 混合建立您自己的區塊網格。預設情況下，混合需要 3 個參數

  • 欄位數
  • 子元素選擇器
    • 一個選用的填充值

填充值可以設定為 $grid-column-gutter，以使用該映射中的值。這將在不同的中斷點產生不同的填充。或者，提供一個數字值（沒有單位類型）來輸出一個靜態 rem 值。

以下是一個範例

.gallery {
  @include grid-layout(3, '.gallery-item', $grid-column-gutter);
}

輸出此 CSS

.gallery > .gallery-item {
  width: 33.33333%;
  float: left;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

@media screen and (min-width: 40em) {
  .gallery > .gallery-item {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

.gallery > .gallery-item:nth-of-type(1n) {
  clear: none;
}

.gallery > .gallery-item:nth-of-type(3n+1) {
  clear: both;
}

.gallery > .gallery-item:last-child {
  float: left;
}

Sass 參考

變數

可以在專案的 設定檔 中使用這些 Sass 變數，自訂此元件的預設樣式。

名稱類型預設值說明
$grid-row-width 數字 $global-width

列的最大寬度。
$grid-column-count 數字 12

網格的預設欄位數。變更此值會影響網格混合的邏輯，以及輸出的 CSS 類別數。
$grid-column-gutter 映射或長度 small: 20px
medium: 30px

不同螢幕尺寸下欄位之間的間距。若要只使用一個尺寸，請將變數設定為數字，而不是地圖。
$grid-column-align-edge 布林值 true

如果為 true，列中的最後一個欄位會與列的另一側對齊。
$grid-column-alias 字串 'columns'

用於欄位別名 (使用 @extend) 的選擇器。如果為 false，則不會建立別名。
$block-grid-max 數字 8

使用區塊網格 CSS 時，可用的最高 .x-up 類別數目。

混合

我們使用這些混合來建立此元件的最終 CSS 輸出。您可以自行使用混合，從我們的元件中建立自己的類別結構。

grid-column

@include grid-column($columns, $gutters);

建立網格欄位。

參數類型預設值說明
$columns 混合 $grid-column-count

欄位的寬度。請參閱 grid-column() 函數，以查看可能的值。
$gutters 混合 $grid-column-gutter

欄位之間的間距。請參閱 grid-column-gutter() 函數，以查看可能的值。

grid-column-row

@include grid-column-row($gutters);

建立網格欄位列。這等於將 .row 和 .column 加入同一個元素。

別名： grid-col-row()

參數類型預設值說明
$gutters 混合 $grid-column-gutter

欄位列兩側溝槽的寬度。請參閱 grid-column-gutter() 函數，以查看可能的值。

grid-column-gutter

@include grid-column-gutter($gutter, $gutters);

設定欄位的溝槽

參數類型預設值說明
$gutter 數字或關鍵字 auto

欄位之間的間距，接受多個值

  • 單一值會使溝槽變成該確切尺寸。
  • 斷點名稱會使溝槽變成 $gutters 地圖中對應的尺寸。
  • "auto" 會使溝槽具有回應性，使用 $gutters 地圖值。
$gutters 數字或地圖 $grid-column-gutter

要使用的溝槽地圖或單一值。預設為回應式溝槽設定。

grid-column-collapse

@include grid-column-collapse;

移除內距，縮小欄位的溝槽。注意：僅在斷點中使用此混合。若要在所有螢幕尺寸上縮小欄位的溝槽，請改用 grid-column() 混合的 $gutter 參數。

別名： grid-col-collapse()

grid-column-margin

@include grid-column-margin($margin, $margins);

設定網格欄位的底部邊距，以符合溝槽

參數類型預設值說明
$margin 數字或關鍵字 auto

網格欄位底側邊距，接受多個值

  • 單一值會讓邊距為該確切大小。
  • 中斷點名稱會讓邊距為 $margins 地圖中對應的大小。
  • "auto" 會讓邊距具備回應性，使用 $margins 地圖值。
$margins 數字或地圖 $grid-column-gutter

要使用的映射或單一值。預設為回應式間距設定。

grid-layout

@include grid-layout($n, $selector, $gutter);

調整子元素大小，讓每個列上出現 $n 個項目。

參數類型預設值說明
$n 數字 無

每列要顯示的元素數量。
$selector 字串 '.column'

要對子元素使用的選擇器。
$gutter 數字或清單 無

要套用至子元素的間距。接受多個值

  • $grid-column-gutter 會使用 $grid-column-gutter 地圖中的值，包括中斷點大小。
  • 固定的數字值會將此間距套用至所有中斷點。

grid-layout-center-last

@include grid-layout-center-last($n);

新增額外 CSS 至區塊網格子項目，讓列中的最後一個項目自動置中。將此套用至欄位，而非列。

參數類型預設值說明
$n 數字 無

每列出現的項目數量。

grid-column-position

@include grid-column-position($position);

重新定位欄位。

別名： grid-col-pos()

參數類型預設值說明
$position 數字或關鍵字 無

可以是

  • 數字：欄位會移動等於指定欄位數量的寬度。正數會將欄位向右推，而負數會將欄位向左拉。
  • center：欄位會置中
  • auto：欄位會向左推（或對於最後一個欄位，向右推）。

grid-column-unposition

@include grid-column-unposition;

重設位置定義。

別名： grid-col-unpos()

grid-column-offset

@include grid-column-offset($n);

將欄位向右偏移 $n 個欄位。

別名： grid-col-off()

參數類型預設值說明
$n 數字或清單 無

要偏移的寬度。您可以傳入 grid-column() 混搭接受的任何值，例如 6、50% 或 1 of 2。

grid-column-end

@include grid-column-end;

停用最後一欄對齊至相反邊緣的預設行為。

別名：grid-col-end()

grid-context

@include grid-context($columns, $root) { }

變更在此混合中定義的欄的行為，以使用不同的欄數。

參數類型預設值說明
$columns 數字 無

要使用的欄數。
$root 布林值 false

如果為 false，此混合中的選取器將巢狀在父選取器中。如果為 true，選取器不會巢狀。

grid-row

@include grid-row($columns, $behavior, $size, $cf, $gutters) { }

建立網格列。

參數類型預設值說明
$columns 數字 null

此列的欄數。null 將使用預設欄數。
$behavior 關鍵字 null

對預設網格樣式的修改。nest 表示列將置於另一個列中。collapse 表示此列中的欄不會有內距。nest collapse 結合這兩種行為。
$size 關鍵字或數字 $grid-row-width

列的最大大小。設定為 expand 以使列佔滿整個寬度。
$cf 布林值 true

是否包含清除浮動。
$gutters 數字或地圖 $grid-column-gutter

反轉邊距時要使用的間距對應或單一值。預設為回應式間距設定。

grid-row-nest

@include grid-row-nest($gutters);

反轉列的邊距，以將其巢狀在欄中。

參數類型預設值說明
$gutters 數字或地圖 $grid-column-gutter

反轉邊距時要使用的間距對應或單一值。預設為回應式間距設定。

grid-row-size

@include grid-row-size($size);

設定網格列大小

參數類型預設值說明
$size 關鍵字或數字 $grid-row-width

列的最大大小。設定為 expand 以使列佔滿整個寬度。

grid-column-size

@include grid-column-size($width);

設定網格欄的寬度。

別名：grid-col-size()

參數類型預設值說明
$width 數字或清單 $grid-column-count

用於建立欄的寬度。您可以傳入 grid-column() 函數接受的任何值，例如 6、50% 或 1 of 2。

函數

grid-column

grid-column($columns)

根據多個因素計算欄的寬度。

參數類型預設值說明
$columns 數字或清單 無

欄的寬度。接受多個值

  • 百分比值會使欄具有該確切大小。
  • 單一數字會使欄跨越該數字的欄寬，並考量父列的欄數。
  • 格式為「x of y」的清單（不含引號）會建立一個寬度為 x 欄的欄，假設父項目的總欄數為 y。