瞭解下Foundation 網格系統

導讀	Foundation 用於開發響應式的 HTML, CSS and JavaScript 框架。

Foundation 網格系統為 12 列。

如果你不需要 12 列，你可以合併一些列，建立一些更大寬度的列。

Foundation 的網格系統是響應式的。 列會根據螢幕尺寸自動調整大小。在大尺寸螢幕上，可能是三列，小螢幕尺寸就可能是三個單列，按順序排列。

Foundation 網格系統有三個列：

1. small (手機端)
2. medium (平板裝置)
3. large (電腦裝置：筆記本，桌上型電腦)

以上類可以結合使用，建立更靈活的佈局

以下是基本的 Foundation 網格結構例項:

<div class="row">
  <div class="small|medium|large-num columns"></div>
</div>
<div class="row">
  <div class="small|medium|large-num columns"></div>
  <div class="small|medium|large-num columns"></div>
  <div class="small|medium|large-num columns"></div>
</div>
<div class="row">
  ...
</div>

首先，建立一行 (div列)。 這是一個水平的垂直列。然後新增列的數量說明 small-num, medium-num 及 large-num 類。注意：列的數量 num 加起來必須等於 12 :

例項

<div class="row">
  <div class="small-12 columns">.small-12 yellow</div>
</div>
<div class="row">
  <div class="small-8 columns">.small-8 beige</div>
  <div class="small-4 columns">.small-4 gray</div>
</div>
<div class="row">
  <div class="large-9 small-8 columns">.small-8 .large-9 pink</div>
  <div class="large-3 small-4 columns">.small-4 .large-3 orange</div>
</div>

例項中，第一行的div 類為 .small-12, 這會建立 12 列（100%寬度）。
第二行建立了兩個列， .small-4 的寬度為33.3% ，.small-8 的寬度為 66.6%。
第三行我們新增了額外的兩個列 (.large-3 和 .large-9)。這意味著如果在大螢幕尺寸下，列就會變為 25% (.large-3) 和 75% (.large-9)的比例。同時我們也指定了小螢幕上列的比例 33% (.small-4) 和 66% (.small-8) 。這種組合的方式對於不同螢幕顯示效果是非常有幫助的。

下表總結了 Foundation 網格系統在多個裝置上的說明：

	小型裝置 Phones (<40.0625em (640px))	中等裝置 Tablets (>=40.0625em (640px))	大裝置 Laptops & Desktops (>=64.0625em (1025px))
網格行為	一直是水平的	以摺疊開始，斷點以上是水平的	以摺疊開始，斷點以上是水平的
類字首	.small-*	.medium-*	.large-*
類的數量	12	12	12
可內嵌	Yes	Yes	Yes
偏移量	Yes	Yes	Yes
列排序	Yes	Yes	Yes

網格最大(.row) 寬度為 62.5rem。在寬屏上，當寬度大於 62.5rem, 列不會跨越頁面的寬度， 即使寬度設定為 100%。但你可以透過 CSS 重新設定 max-width:

例項

<style>
.row {
    max-width: 100%;
}
</style>

如果你使用預設的 max-width, 但希望背景顏色跨越整個頁面寬度，你可以使用 .row 包裹整個容器，並指定你需要的背景顏色:

例項

<div style="background-color:coral;padding:25px;">
  <div class="row">
    <div class="small-6 columns" style="background-color:yellow;">.small-6</div>
    <div class="small-6 columns" style="background-color:pink;">.small-6</div>
  </div>
</div>

原文來自：