Foundation XY Grid 中的水平堆叠（Horizontal Stacking）
在 Foundation 的 XY Grid 中，水平堆叠（即列并排横向排列）是默认行为，使用 .grid-x 类实现。单元格（.cell）会根据指定的宽度类（如 small-6）横向排列，总和不超过 12 列。
- 小屏幕上，如果宽度总和超过 12 或未指定宽度，单元格会自动垂直堆叠（从上到下）。
- 中、大屏幕上，会横向并排显示。
基本水平堆叠示例
<div class="grid-x grid-padding-x">
<div class="cell small-12 medium-6 large-4" style="background: #fee;">列1（小屏全宽，中屏50%，大屏33%）</div>
<div class="cell small-12 medium-6 large-4" style="background: #efe;">列2</div>
<div class="cell small-12 medium-12 large-4" style="background: #eef;">列3（大屏33%，中屏全宽）</div>
</div>效果：
- 小屏幕：三列垂直堆叠（从上到下）。
- 中屏幕：列1 和 列2 并排（各50%），列3 在下一行全宽。
- 大屏幕：三列并排（各约33%）。
强制水平堆叠（防止垂直堆叠）
如果想在小屏幕上也强制横向并排（不推荐移动优先，但可实现），可以为小屏指定宽度总和 ≤12：
<div class="grid-x grid-padding-x">
<div class="cell small-4">列1（小屏33%）</div>
<div class="cell small-4">列2</div>
<div class="cell small-4">列3</div>
</div>水平对齐类（在 .grid-x 上）
align-center：水平居中align-right：右对齐align-justify：两端对齐align-spaced：均匀分布（space-around）
示例：
<div class="grid-x align-justify">
<div class="cell shrink" style="background: #fee;">短内容</div>
<div class="cell shrink" style="background: #efe;">另一个</div>
</div>如果你的问题是想实现横向并排而不垂直堆叠，以上就是方法。XY Grid 的移动优先设计会让小屏默认垂直堆叠，以适应手机屏幕。
相关视觉示例（XY Grid 水平布局演示）
如果你指的是垂直堆叠（grid-y），或者有具体场景（如卡片横向排列），请提供更多细节，我可以给出针对性代码！
