Foundation卡片需用grid-x+cell实现响应式布局并加grid-margin-x，或用flex-container.align-stretch统一高度；须规范内部图片、标题、文本样式，并禁用float等旧类。
Foundation 的卡片组件（.card）默认是块级、等宽堆叠的，若直接放在非容器或未配合响应式网格使用，容易出现高度不一致、换行错位、间距不均等问题。核心原因在于卡片内容长度不同导致高度差异，而 Foundation 默认未对齐高度或统一列宽。
用 grid-x + cell 包裹卡片，控制列数与断点
Foundation 的栅格系统（v6+）需用 grid-x 作为行容器，每个卡片放在 cell 内，并指定宽度类（如 small-12 medium-6 large-4），才能响应式均分且避免浮动错乱：
<div class="grid-x grid-margin-x">
<div class="cell small-12 medium-6 large-4">
<div class="card">...</div>
</div>
<div class="cell small-12 medium-6 large-4">
<div class="card">...</div>
</div>
<div class="cell small-12 medium-6 large-4">
<div class="card">...</div>
</div>
</div>
注意：必须加 grid-margin-x（横向间距）或 grid-padding-x，否则卡片会紧贴边缘；cell 不可省略，仅用 card 无法参与栅格计算。
用 flex-container 统一卡片高度与对齐
当需要所有卡片高度一致（如并排展示时底部对齐），可在卡片外层加 flex-container，并设 align-center 或 align-stretch：
立即学习“前端免费学习笔记（深入）”；
<div class="flex-container align-stretch"> <div class="card">...</div> <div class="card">...</div> <div class="card">...</div> </div>
关键点：
-
align-stretch让卡片自动拉伸到容器最高项的高度 - 避免在
card内部再用flex-container冲突布局流 - 搭配
flex-dir-row可实现水平排列（替代栅格），但需手动处理响应式断行（如配合show-for-medium类）
补足卡片内部结构一致性
即使外部布局正确，卡片内标题、图片、文本高度不一也会造成视觉不齐。建议：
- 为卡片头图（
.card-section img）设固定宽高比或object-fit: cover - 限制标题行数：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;（单行）或用-webkit-line-clamp（多行截断） - 给
.card-section设最小高度（如min-height: 120px），避免文字少的卡片过矮 - 移除卡片默认的
margin-bottom，改用栅格的grid-margin-x/y控制整体间距
慎用 float 或旧版 row/column 类
Foundation v6+ 已弃用 row / column 等浮动类。若混用 float-left 或手动写 float CSS，会导致 grid-x 计算失效、换行异常、父容器塌陷。务必统一使用 grid-x + cell 或 flex-container 布局体系。
