Foundation XY Grid 中的块状网格（Block Grid）
Foundation 的 块状网格（Block Grid）是一种快捷方式，用于创建均匀分布的等宽列（如图片画廊、产品卡片列表等），无需为每个单元格单独指定列宽（如 small-4）。
在旧的 Float Grid 中，块状网格使用 .small-block-grid-n 等类（旧版常见）。
在当前默认的 XY Grid（Foundation 6.4+）中，块状网格通过在容器上添加 up 类 实现：
- 类格式：
[size]-up-[n] [size]：断点（small-、medium-、large-）[n]：每行显示 n 个单元格（单元格会自动等宽分配空间）
这让所有 .cell 自动均匀分布，非常适合响应式画廊或网格布局。
基本示例代码
<div class="grid-x grid-padding-x small-up-2 medium-up-3 large-up-5">
<div class="cell" style="background: #fee; padding: 20px; text-align: center;">项目1</div>
<div class="cell" style="background: #efe; padding: 20px; text-align: center;">项目2</div>
<div class="cell" style="background: #eef; padding: 20px; text-align: center;">项目3</div>
<div class="cell" style="background: #fef; padding: 20px; text-align: center;">项目4</div>
<div class="cell" style="background: #eff; padding: 20px; text-align: center;">项目5</div>
<div class="cell" style="background: #ffe; padding: 20px; text-align: center;">项目6</div>
<!-- 可以添加更多项目 -->
</div>效果说明：
- 小型设备：每行 2 个（每个约 50% 宽）
- 中型设备：每行 3 个（每个约 33% 宽）
- 大型设备：每行 5 个（每个约 20% 宽）
剩余空间会均匀分布，项目自动换行。
与 gutter 结合
- 使用
grid-padding-x：单元格内间距（内容不触边） - 使用
grid-margin-x：单元格外间距（更像卡片间隙）
示例：grid-x grid-margin-x small-up-1 medium-up-4 large-up-6
注意事项
- 不支持垂直网格（grid-y），只能用于 grid-x。
- 如果使用 Sass 自定义，可以通过
@include xy-grid-layout()mixin 创建更多变体。 - 常用于图片画廊、团队成员、产品展示等场景。
如果你想实现特定数量的列、结合缩略图或卡片样式，提供更多细节，我可以给出完整代码！
