Foundation（ZURB Foundation）是一个流行的响应式前端框架，其网格系统（Grid System）是核心功能之一，用于快速构建多设备适配的页面布局。它采用12列设计，支持嵌套、可响应式调整，非常适合移动优先（mobile-first）开发。
当前版本网格系统概述
从 Foundation 6.4 开始，默认网格系统是 XY Grid（基于 Flexbox），它取代了旧的 Float Grid（基于浮动）。XY Grid 更强大、更灵活，支持更多高级功能（如自动大小、偏移、垂直网格等）。旧的 Float Grid 已默认禁用，除非需要兼容 IE10。
官方网站文档：
- XY Grid：https://get.foundation/sites/docs/xy-grid.html
- 旧 Float Grid：https://get.foundation/sites/docs/grid.html
XY Grid 基本用法
XY Grid 使用 Flexbox，实现更精确的对齐和源顺序控制。
- 容器：
.grid-x（代替旧的.row） - 列：
.cell（代替旧的.columns或.column） - 列宽类：根据断点指定列数，总和不超过 12。
- 小屏（默认）：
small-数字（如small-6占 6/12 = 50%） - 中屏：
medium-数字 - 大屏：
large-数字 - 自动大小：使用
.auto或.shrink让列自动分配宽度。 - 偏移：
small-offset-数字 - gutter（间距）：默认有 padding，可用
grid-padding-x或grid-margin-x控制。
基本示例代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css">
</head>
<body>
<div class="grid-x grid-padding-x">
<div class="cell small-12 medium-6 large-4">列1：小屏全宽，中屏50%，大屏33%</div>
<div class="cell small-12 medium-6 large-4">列2</div>
<div class="cell small-12 medium-12 large-4">列3</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/js/foundation.min.js"></script>
<script>$(document).foundation();</script>
</body>
</html>- 小屏幕上，列会垂直堆叠（全宽）。
- 中屏幕及以上，会并排显示。
旧 Float Grid（如果需要使用）
如果项目需要兼容旧浏览器，可引入 foundation-float.css。
- 容器：
.row - 列：
.columns - 示例：
<div class="row"><div class="small-6 large-4 columns">...</div></div>
其他高级功能（XY Grid）
- 块网格（Block Grid）：均匀分布，如
small-up-3（小屏每行3个）。 - 垂直网格：
.grid-y - 框架网格：
.grid-frame用于全屏布局。 - 塌陷：去除 gutter，如
.grid-margin-x .collapse
Foundation 网格系统易学易用，如果你熟悉 Bootstrap 的网格，它类似但更灵活（尤其是 XY Grid 的源排序和对齐）。
如果需要更具体的示例、Sass 自定义或某个功能的代码，请提供更多细节！
