流式网格需容器有明确宽度、子项不固定像素、用grid/flex驱动；display: grid仅开启上下文，须配grid-template-columns等才显效果；repeat(auto-fit, minmax(240px, 1fr))是响应式卡片核心，需配合gap、img约束及容器width: 100%。
流式网格不是“加个百分比就完事”，真正起效的前提是：容器有明确宽度上下文，子项不靠固定像素卡死，且必须用现代布局机制（grid 或 flex）驱动弹性行为。纯 width: 100% + float 已经无法应对今天主流设备的尺寸跨度。
为什么写了 display: grid 却没看出网格效果
因为 display: grid 只是开启网格上下文，不自动生成任何轨道线。没有 grid-template-columns 或 grid-template-rows，所有子元素就堆在左上角第一格里，视觉上和普通块级流毫无区别。
- 快速验证方法：给容器加
border: 1px solid red，再检查是否有列线被渲染出来 -
grid-auto-columns和grid-auto-rows是兜底机制，只对隐式网格（超出模板范围的项目）生效，不能替代显式定义 - 哪怕只要“内容自动分列”，也得写
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))
repeat(auto-fit, minmax()) 参数怎么配才不崩
这个组合是响应式卡片布局的底层引擎，但参数错一位，小屏下就溢出或压缩成竖线。
-
minmax(240px, 1fr)中的240px是最小列宽，对应 iPhone SE 屏宽；低于它，浏览器会强制压缩甚至文字换行错乱 - 用
auto-fit而非auto-fill：前者收缩空列，后者保留空白轨道，容易在小屏留白 - 别混单位，比如
50% 1fr或1fr auto——auto项可能撑满剩余空间，破坏列数预期 - 务必配合
gap使用，否则 padding/margin 挤压会让minmax()在窄屏失效
图片和卡片在网格里撑破布局怎么办
固定高图片、未约束的文字、缺失的盒模型控制，都会让网格项高度失控，导致后续行错位或 hover 时“弹跳”。
立即学习“前端免费学习笔记（深入）”；
- 所有
img必须加width: 100%; height: auto;，否则会按原始尺寸撑开网格项 - 卡片建议设
min-height（如min-height: 180px）锚定基线，避免内容少时高度塌陷 - hover 动画优先用
transform和opacity，避免触发布局重排；box-shadow改用filter: drop-shadow()更稳妥 - 如果用了
grid-auto-rows，又允许项目高度自由变化，那 hover 放大就会直接推挤下面整行 —— 此时应改用显式grid-template-rows或放弃动态行高
最常被跳过的动作，不是写错 minmax()，而是忘了给容器加 width: 100% 或 max-width —— 没有这个前提，minmax() 根本没参考系可算。
