Foundation XY Grid 常见实例
以下是几个实用 Foundation XY Grid 的完整代码实例，涵盖响应式布局、块状网格、偏移、对齐等常见场景。你可以直接复制到 HTML 文件中测试（需引入 Foundation CSS/JS）。
1. 基本响应式三列布局（经典实例）
最常见的布局：侧边栏 + 主内容 + 侧边栏，或内容卡片。
<div class="grid-x grid-padding-x">
<div class="cell small-12 medium-4 large-3" style="background:#fee; padding:20px;">侧边栏（小屏全宽）</div>
<div class="cell small-12 medium-8 large-6" style="background:#efe; padding:20px;">主内容区</div>
<div class="cell small-12 medium-12 large-3" style="background:#eef; padding:20px;">右侧栏（大屏出现）</div>
</div>2. 块状网格 – 图片画廊/产品展示（up 类）
均匀分布的响应式网格，常用于画廊。
<div class="grid-x grid-padding-x small-up-1 medium-up-3 large-up-4">
<div class="cell" style="padding:10px;"><img src="https://via.placeholder.com/300" alt="图片1"></div>
<div class="cell" style="padding:10px;"><img src="https://via.placeholder.com/300" alt="图片2"></div>
<div class="cell" style="padding:10px;"><img src="https://via.placeholder.com/300" alt="图片3"></div>
<div class="cell" style="padding:10px;"><img src="https://via.placeholder.com/300" alt="图片4"></div>
<!-- 添加更多... -->
</div>3. 带偏移和对齐的卡片布局
使用偏移（offset）和自动大小（auto/shrink）。
<div class="grid-x grid-padding-x align-center">
<div class="cell shrink" style="background:#fee; padding:20px; margin:10px;">卡片1（shrink）</div>
<div class="cell auto" style="background:#efe; padding:20px; margin:10px;">卡片2（占剩余空间）</div>
<div class="cell small-6 medium-offset-2 large-4" style="background:#eef; padding:20px; margin:10px;">卡片3（中屏偏移2列）</div>
</div>这些实例覆盖了 90% 的日常使用。如果你需要特定场景（如嵌套网格、垂直网格 grid-y、表单布局等）的代码，告诉我细节，我可以继续提供！
