Foundation 网格 - 水平堆叠

Foundation XY Grid 中的水平堆叠（Horizontal Stacking）

在 Foundation 的 XY Grid 中，水平堆叠（即列并排横向排列）是默认行为，使用.grid-x类实现。单元格（.cell）会根据指定的宽度类（如small-6）横向排列，总和不超过 12 列。

• 小屏幕上，如果宽度总和超过 12 或未指定宽度，单元格会自动垂直堆叠（从上到下）。
• 中、大屏幕上，会横向并排显示。

基本水平堆叠示例

<divclass="grid-x grid-padding-x"><divclass="cell small-12 medium-6 large-4"style="background:#fee;">列1（小屏全宽，中屏50%，大屏33%）</div><divclass="cell small-12 medium-6 large-4"style="background:#efe;">列2</div><divclass="cell small-12 medium-12 large-4"style="background:#eef;">列3（大屏33%，中屏全宽）</div></div>

效果：

• 小屏幕：三列垂直堆叠（从上到下）。
• 中屏幕：列1 和 列2 并排（各50%），列3 在下一行全宽。
• 大屏幕：三列并排（各约33%）。

强制水平堆叠（防止垂直堆叠）

如果想在小屏幕上也强制横向并排（不推荐移动优先，但可实现），可以为小屏指定宽度总和 ≤12：

<divclass="grid-x grid-padding-x"><divclass="cell small-4">列1（小屏33%）</div><divclass="cell small-4">列2</div><divclass="cell small-4">列3</div></div>

水平对齐类（在 .grid-x 上）

• align-center：水平居中
• align-right：右对齐
• align-justify：两端对齐
• align-spaced：均匀分布（space-around）

示例：

<divclass="grid-x align-justify"><divclass="cell shrink"style="background:#fee;">短内容</div><divclass="cell shrink"style="background:#efe;">另一个</div></div>

如果你的问题是想实现横向并排而不垂直堆叠，以上就是方法。XY Grid 的移动优先设计会让小屏默认垂直堆叠，以适应手机屏幕。

相关视觉示例（XY Grid 水平布局演示）

如果你指的是垂直堆叠（grid-y），或者有具体场景（如卡片横向排列），请提供更多细节，我可以给出针对性代码！