Foundation 块状网格

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 创建更多变体。
• 常用于图片画廊、团队成员、产品展示等场景。

如果你想实现特定数量的列、结合缩略图或卡片样式，提供更多细节，我可以给出完整代码！