Foundation 网格 – 大型设备

Foundation 网格系统在大型设备（Large Devices）上的行为

Foundation XY Grid 的 large 断点 默认对应屏幕宽度 ≥ 1024px（通常指桌面电脑、大型平板横屏或宽屏显示器）。

• 移动优先原则：如果没有指定 large-* 类，列会继承 medium 或 small 的样式。
• 在 large 设备上，使用 large-* 类来覆盖前面的布局，实现最大宽度的水平并排、更精细的列分配（如 12 列细分成更多部分）。
• 这时布局通常达到“最终状态”：充分利用宽屏空间，列并排显示，信息密度最高。

示例代码：在 large 设备上的典型响应式变化

<div class="grid-x grid-padding-x">
  <div class="cell small-12 medium-6 large-4" style="background: #fee; padding: 20px;">列1</div>
  <div class="cell small-12 medium-6 large-4" style="background: #efe; padding: 20px;">列2</div>
  <div class="cell small-12 medium-12 large-4" style="background: #eef; padding: 20px;">列3</div>
</div>

效果说明：

• 小型设备（<640px）：三列垂直堆叠，全宽。
• 中型设备（≥640px ~ <1024px）：列1 和 列2 并排（各 50%），列3 全宽下一行。
• 大型设备（≥1024px）：三列完全水平并排（各 4/12 ≈ 33.33%）。

大型设备常用类

• large-数字：指定列宽（1~12）。
• large-offset-数字：偏移。
• large-up-n：块网格，每行 n 个。
• large-auto / large-shrink：自动调整。
• large-collapse：去除 gutter（间距）以紧凑显示。

在大型设备上，你可以充分利用 12 列系统创建复杂布局，如侧边栏 + 主内容 + 广告栏。如果你有特定的大型设备布局需求（如四列卡片、固定宽度容器等），提供细节，我可以给出定制代码！