Foundation 网格 – 小型设备

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

Foundation（特别是 XY Grid）采用 移动优先（Mobile-First） 设计原则。这意味着：

• 小型设备（small breakpoint） 是默认起点，通常指屏幕宽度 < 640px（手机等小型设备）。
• 你先为小型设备定义样式（使用 small-* 类或无前缀默认）。
• 如果不指定 medium- 或 large- 类，中型和大屏会继承小型设备的样式。
• 在小型设备上，如果列的宽度总和超过 12 或未指定宽度，列会自动垂直堆叠（stacking），每个列占满全宽（100%），从上到下排列。这是最友好的移动体验，避免横向挤压。

为什么这样设计？

• 小型屏幕空间有限，水平并排容易导致内容太窄、难以阅读。
• 垂直堆叠确保内容易读、易触控。

示例代码：在小型设备上垂直堆叠

<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）：列1 和 列2 并排（各50%），列3 全宽下一行。
• 大型设备（≥1024px）：三列并排（各约33%）。

如何在小型设备上强制水平并排？

不推荐（违背移动优先），但可行：为 small- 指定宽度总和 ≤12。

<div class="grid-x grid-padding-x">
  <div class="cell small-6">列1（小型设备占50%）</div>
  <div class="cell small-6">列2（小型设备占50%）</div>
</div>

• 小型设备上会水平并排。

其他小型设备相关类

• small-offset-n：在小型设备上偏移 n 列。
• small-up-n：块网格（block grid），小型设备每行显示 n 个项目。
• small-shrink 或 small-auto：自动调整宽度。

Foundation 的这一设计让布局在手机上自然流畅。如果你有具体场景（如卡片在手机上的排列），可以提供更多细节，我再给出优化代码！