# Foundation 網格系統 Foundation 網格系統為 12 列。 如果你不需要 12 列，你可以合并一些列，創建一些更大寬度的列。  Foundation 的網格系統是響應式的。 列會根據屏幕尺寸自動調整大小。在大尺寸屏幕上，可能是三列，小屏幕尺寸就可能是三個單列，按順序排列。 ## 網格列 Foundation 網格系統有三個列： * `.small` (手機端) * `.medium` (平板設備) * `.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> ``` 首先，創建一行 (`&lt;div class="row"&gt;`)。 這是一個水平的垂直列。然后添加列的數量說明 `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> ``` 實例中，第一行的 &lt;div&gt; 類為 `.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 (&lt;40.0625em (640px)) | Tablets (&gt;=40.0625em (640px)) | Laptops & Desktops (&gt;=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> ```