# Foundation 網格 - 水平堆疊
以下實例創建了一個基本的網格系統，在 PC 和平板設備上它是水平平鋪的，在手機等小型設備上它是水平堆疊的。
### 實例
```
<div class="row">
??<div class="medium-6 columns" style="background-color:yellow;">
????<p>菜鳥教程</p>
??</div>
??<div class="medium-6 columns" style="background-color:pink;">
????<p>菜鳥教程</p>
??</div>
</div>
```
> 
> **提示:** `.small|medium|large-*` 類中的數字指定了跨越的列數。所以， `.small-1` 跨越 1 列, `.small-4` 跨越 4 列, `.small-6` 跨越 6 列 (50% 寬度) 等。
> **注意:** 要保證數列加起來是 12 列!
- Foundation 入門
- Foundation 5 簡介
- Foundation 起步
- Foundation 文本
- Foundation 表格
- Foundation 按鈕
- Foundation 按鈕組
- Foundation 圖標
- Foundation 標簽
- Foundation 提醒框
- Foundation 進度條
- Foundation 面板
- Foundation 圖片
- Foundation 下拉菜單
- Foundation 折疊列表
- Foundation 列表
- Foundation 選項卡
- Foundation 分頁
- Foundation 價格表
- Foundation 頂部導航欄
- Foundation 側邊欄
- Foundation 滑動導航(Off-Canvas)
- Foundation 麥哲倫（Magellan）導航
- Foundation 表單
- Foundation 輸入框尺寸
- Foundation 開關
- Foundation 滑塊
- Foundation 提示框
- Foundation 模態框
- Foundation Joyride
- Foundation 均衡器(Equalizer)
- Foundation 網格
- Foundation 網格系統
- Foundation 網格 - 水平堆疊
- Foundation 網格 - 小型設備
- Foundation 網格 - 中型設備
- Foundation 網格 - 大型設備
- Foundation 塊狀網格
- Foundation 網格實例
- Foundation 參考手冊
- Foundation 圖標參考手冊
- Foundation CSS 參考手冊
- Foundation CSS 可見性