Foundation 网格实例

Foundation XY Grid 常见实例

以下是几个实用Foundation XY Grid的完整代码实例，涵盖响应式布局、块状网格、偏移、对齐等常见场景。你可以直接复制到 HTML 文件中测试（需引入 Foundation CSS/JS）。

1. 基本响应式三列布局（经典实例）

最常见的布局：侧边栏 + 主内容 + 侧边栏，或内容卡片。

<divclass="grid-x grid-padding-x"><divclass="cell small-12 medium-4 large-3"style="background:#fee;padding:20px;">侧边栏（小屏全宽）</div><divclass="cell small-12 medium-8 large-6"style="background:#efe;padding:20px;">主内容区</div><divclass="cell small-12 medium-12 large-3"style="background:#eef;padding:20px;">右侧栏（大屏出现）</div></div>

2. 块状网格 - 图片画廊/产品展示（up 类）

均匀分布的响应式网格，常用于画廊。

<divclass="grid-x grid-padding-x small-up-1 medium-up-3 large-up-4"><divclass="cell"style="padding:10px;"><imgsrc="https://via.placeholder.com/300"alt="图片1"></div><divclass="cell"style="padding:10px;"><imgsrc="https://via.placeholder.com/300"alt="图片2"></div><divclass="cell"style="padding:10px;"><imgsrc="https://via.placeholder.com/300"alt="图片3"></div><divclass="cell"style="padding:10px;"><imgsrc="https://via.placeholder.com/300"alt="图片4"></div><!-- 添加更多... --></div>

3. 带偏移和对齐的卡片布局

使用偏移（offset）和自动大小（auto/shrink）。

<divclass="grid-x grid-padding-x align-center"><divclass="cell shrink"style="background:#fee;padding:20px;margin:10px;">卡片1（shrink）</div><divclass="cell auto"style="background:#efe;padding:20px;margin:10px;">卡片2（占剩余空间）</div><divclass="cell small-6 medium-offset-2 large-4"style="background:#eef;padding:20px;margin:10px;">卡片3（中屏偏移2列）</div></div>

这些实例覆盖了 90% 的日常使用。如果你需要特定场景（如嵌套网格、垂直网格 grid-y、表单布局等）的代码，告诉我细节，我可以继续提供！