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自动均匀分布，非常适合响应式画廊或网格布局。
基本示例代码
<divclass="grid-x grid-padding-x small-up-2 medium-up-3 large-up-5"><divclass="cell"style="background:#fee;padding:20px;text-align:center;">项目1</div><divclass="cell"style="background:#efe;padding:20px;text-align:center;">项目2</div><divclass="cell"style="background:#eef;padding:20px;text-align:center;">项目3</div><divclass="cell"style="background:#fef;padding:20px;text-align:center;">项目4</div><divclass="cell"style="background:#eff;padding:20px;text-align:center;">项目5</div><divclass="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 创建更多变体。 - 常用于图片画廊、团队成员、产品展示等场景。
如果你想实现特定数量的列、结合缩略图或卡片样式，提供更多细节，我可以给出完整代码！
