# 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&#124;medium&#124;large-*` 类中的数字指定了跨越的列数。所以， `.small-1` 跨越 1 列, `.small-4` 跨越 4 列, `.small-6` 跨越 6 列 (50% 宽度) 等。 > **注意:** 要保证数列加起来是 12 列!