Foundation网格错位主因是row与column嵌套不规范：row必须直接包含column，禁止中间插入其他容器；嵌套时子row须置于column内；需确保viewport标签、CSS正确加载及类名版本匹配。
Foundation 的网格错位，多数是因为 row 和 column 类的嵌套关系或容器结构不规范导致的，不是 CSS 写错了，而是语义和层级用错了。
必须确保 row 是 column 的直接父容器
Foundation（尤其是 v6+）要求每个 .column 必须直接放在 .row 内。如果中间夹了其他 div、section 或自定义类，网格计算会失效，出现宽度溢出、换行异常或左右不对齐。
- ✅ 正确写法：
<div class="row"><br> <div class="column small-12 medium-6">左栏</div><br> <div class="column small-12 medium-6">右栏</div><br></div>
- ❌ 常见错误（加了多余 wrapper）：
<div class="row"><br> <div class="my-wrapper"> <!-- 这个 div 破坏了 row → column 直接关系 --><br> <div class="column small-12">内容</div><br> </div><br></div>
解决方法：删掉中间无意义的包裹层，或把 my-wrapper 改为 column 并赋予合适尺寸类（如 small-12）。
避免在 column 内部再用 row 而不重置上下文
Foundation 允许嵌套网格，但子 .row 必须放在 .column 内，且不能“悬空”——即不能让 .row 成为 .row 的子元素（兄弟变父子）。
立即学习“前端免费学习笔记（深入）”；
- ✅ 合理嵌套：
<div class="row"><br> <div class="column small-12"><br> <div class="row"> <!-- 子 row，合法 --><br> <div class="column small-6">A</div><br> <div class="column small-6">B</div><br> </div><br> </div><br></div>
- ❌ 错误嵌套（row 套 row，无 column 隔离）：
<div class="row"><br> <div class="row"> <!-- 缺少 column 包裹，Foundation 不识别此结构 --><br> <div class="column small-6">错位！</div><br> </div><br></div>
检查是否遗漏了 viewport meta 标签或基础样式加载
Foundation 响应式依赖视口设置和完整 CSS 初始化。错位有时是表面现象，根源在基础环境缺失：
- 确认 HTML
<head>中有：<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 确保 Foundation CSS（含
foundation.css或编译后的 CSS）已正确加载，且没有被其他重置样式（如 normalize.css 冲突）覆盖栅格 margin/padding。 - 检查浏览器控制台是否有 404（CSS 未加载）或 CSS 优先级问题（比如自定义样式强行设了
float: left或display: inline-block）。
小屏下错位？重点核对响应式类命名是否匹配版本
Foundation v6 使用 small- / medium- / large-，而旧版 v5 是 small-* 但含义不同（v5 的 small-12 表示“始终占满”，v6 则表示“小屏下占满，更大屏按后续类决定”）。混用版本类名会导致断点失效、列宽突变。
- 统一使用当前 Foundation 版本文档中的类名（推荐查官网 Grid 文档）
- 避免只写
medium-6却漏掉small-12—— 小屏没定义时会回退到默认（可能为 auto 宽度），造成错位。
