foundation的grid基于flexbox而非css grid或浮动，.grid-x/.cell与原生grid属性互斥；其响应式断点、等高处理及交互实现均需遵循特定规则，混用易冲突。
Foundation的Grid布局和Bootstrap有什么本质区别
Foundation默认用的是flex-grid（基于Flexbox），不是浮动或CSS Grid；它不自动 fallback 到float-grid，也不原生支持display: grid语法。如果你在项目里写了grid-row或grid-template-areas，那和Foundation的.grid-x、.cell完全无关——它们是两套系统，混用会冲突。
实际开发中，flex-grid靠justify-content、align-items控制对齐，靠flex-basis算列宽，所以small-6这类类名本质是设置flex: 0 0 50%，不是width: 50%。这点影响响应式行为：比如子元素设了min-width: 300px，可能撑破medium-4的预期宽度。
- 必须显式引入
foundation-flex-grid.css（或通过Sass import@include foundation-flex-grid），否则.grid-x无样式 -
small-前缀只在max-width: 39.9375em生效，不是手机全屏；medium-起始断点是40em（640px），比常见“平板”定义更早 - 嵌套
.grid-x时，内层需加data-equalizer才能让子.cell等高，否则Flex主轴对齐失效
怎么用Grid实现带交互的卡片列表（hover + collapse）
Foundation本身不提供卡片hover动画或折叠组件，得自己补JS和CSS。但Grid能帮你快速对齐结构，关键是要避开.cell的flex-shrink: 1导致hover缩放变形的问题。
典型错误是直接给.cell加transform: scale(1.02)，结果因为flex容器重排，卡片错位甚至换行。正确做法是把交互逻辑放在.cell内部的包装容器上：
<div class="grid-x grid-margin-x">
<div class="cell small-12 medium-4">
<div class="card-wrapper"> <!-- hover target -->
<div class="card">...</div>
</div>
</div>
</div>
-
.card-wrapper设height: 100%和position: relative，避免父.cell因内容高度变化而抖动 - 折叠用
data-toggler配合.accordion，但注意.accordion-item不能直接塞进.cell——要包一层div，否则Foundation JS计算高度出错 - 如果用
data-responsive-toggle做移动端菜单，确保触发按钮不在.grid-x内部，否则Flex布局可能截断点击区域
为什么data-equalizer在Grid里经常失效
根本原因是data-equalizer依赖DOM加载后测量高度，而.grid-x的Flex布局会让子.cell初始高度为auto，如果其中内容（比如图片）还没加载完，测量值就是0。更隐蔽的是：当.cell有margin-bottom，equalizer默认只比对outerHeight，但没算margin，导致视觉上仍不等高。
- 必须等所有图片加载完成再初始化：
$(document).on('load', '[data-equalizer]', function() { Foundation.reInit('equalizer'); }); - 加
data-equalize-on-stack属性，让堆叠时也强制等高（比如small-12 medium-6在小屏变单列） - 避免在
.cell上直接设padding或border，改用内部容器处理，否则equalizer的height计算会漏掉这些值
Grid和自定义CSS Grid共存时怎么避免样式污染
Foundation的.grid-x会全局重置display: flex和flex-wrap，如果你在某个模块里想用原生display: grid，直接写display: grid会被.grid-x的CSS规则覆盖（因为它的选择器权重更高）。最稳妥的方式是用属性选择器隔离：
.my-custom-grid[data-custom-grid] {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.my-custom-grid[data-custom-grid] > * {
grid-column: span 1;
}
- 不要用
!important硬覆盖Foundation样式，会导致后续升级时维护困难 - Sass用户可在
_settings.scss里关掉$flexbox-classes: false，然后只在需要的地方@include flex-grid-row，减少全局影响 - 如果必须用
grid-area布局，记得把.cell类名全部去掉——Foundation的.cell含flex: 1，和grid-area冲突
Grid系统本身不处理JavaScript交互逻辑，所有下拉、模态、轮播都得靠Foundation的JS插件单独初始化，而且它们和Grid的响应式类名没有绑定关系——data-responsive-toggle不会因为你用了large-8就自动适配大屏行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
