okbiye｜告别开题内耗！专属AI写作功能，解锁学术开题全新模式
2026/7/7 0:21:11
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控制。
基本示例代码
<!DOCTYPEhtml><htmllang="zh"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css"></head><body><divclass="grid-x grid-padding-x"><divclass="cell small-12 medium-6 large-4">列1：小屏全宽，中屏50%，大屏33%</div><divclass="cell small-12 medium-6 large-4">列2</div><divclass="cell small-12 medium-12 large-4">列3</div></div><scriptsrc="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 自定义或某个功能的代码，请提供更多细节！