Foundation 网格实例 以下我们收集了一些网格常用的实例。 三个均等列 该实例演示了如何创建三个均等列 (33.3%/33.3%/33.3%) ，在中型和大型设备上显示三个列，在小型设备上自动堆叠： 实例       .medium-4         .medium-4         .medium-4   三个不均等列 该实例演示了如何创建三个不均等列 (25%/50%/25%)，在中型和大型设备上显示三个列，在小型设备上自动堆叠： 实例  

Foundation 网格 – 水平堆叠 以下实例创建了一个基本的网格系统，在 PC 和平板设备上它是水平平铺的，在手机等小型设备上它是水平堆叠的。 实例         软件开发网            软件开发网    提示: .small|medium|large-* 类中的数字指定了跨越的列数。所以， .small-1 跨越 1 列, .small-4 跨越 4 列, .small-6 跨越 6 列 (50% 宽度) 等。注意: 要保证数列加起来是 12 列!

Foundation 网格 – 小型设备 假设我们在小型设备上有一个简单的网格布局，两列，宽度比例为 25% 和 75%。 提示: 小型设备的定义是屏幕小于 40.0625em。 小型设备上我们使用 .small-* 类。 .... .... 以下实例设置了两个列，比例为 25% 和 75% (Foundation 是移动优先: 如果没有特别说明，在大型设备上会继承 .small 类的代码): .small in them and use those”. 实例         软件开发网

Foundation 网格 – 大型设备 上一章节我们介绍了中型设备和小型设备的网格布局，小型设备上使用的比例为 25%/75% (.small-3 和 .small-9)，但在中型设备上使用的比例为 50%/50% (.medium-6 和 .medium-6)： .... .... 在大型设备上我们推荐的比例为 33%/66%。 提示: 大型设备的屏幕尺寸定义大于 64.0625em。 大型设备上使用 .large-* 类。 现在我们在大型设备上添加两列： .... .... 解析