最稳写法是grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))，确保卡片最小300px、超出均分空间且自动换行；需配align-items: start防错位，gap推荐clamp(0.5rem, 2vw, 1rem)。
grid-template-columns: repeat(auto-fill, minmax()) 怎么写才不翻车
直接用 repeat(auto-fill, minmax(300px, 1fr))) 是最稳的写法，它让每张卡片最小 300px、超出时均分剩余空间、自动换行，不用算列数，也不用写媒体查询。常见错误是写成 repeat(3, 1fr)——这会强制三列，小屏下卡片被压扁，文字换行混乱；或者用 25% 25% 25% 25%，但 gap 或边框会破坏总宽，导致最后一列掉行。
如果卡片内容高度差异大，记得在容器上加 align-items: start，避免默认 stretch 拉伸导致整行错位。固定列数（比如始终 4 列）可用 repeat(4, 1fr) + 容器 min-width 控制，否则小屏会溢出。
gap 和 margin 混用会出什么问题
gap 是网格专用间距，只作用于网格项之间，不碰容器边缘；margin 是盒模型属性，会改变项目实际尺寸，且在 Grid 中容易引发隐式轨道扩张或对齐错乱。典型错误是给卡片加 margin: 1rem 还同时设 gap: 1rem，结果间隙翻倍，视觉松散。
推荐统一用 gap: clamp(0.5rem, 2vw, 1rem)，兼顾小屏紧凑和大屏呼吸感；若卡片带 border 或 box-shadow，gap 至少设 8px，防止视觉粘连。IE 不支持 gap，但现代项目基本可忽略。
卡片内容高度不一致时怎么对齐顶部
Grid 默认按行拉伸，某张卡片内容多、高度大，会撑高整行，导致下一行卡片顶部不齐——这不是 bug，是 Grid 正常行为。解决核心不是改 grid-template-rows（那会失去自适应），而是控制对齐与内部流。
- 容器设
align-items: start，所有卡片顶部对齐 - 卡片内部用
display: flex; flex-direction: column+ 主体区域flex: 1拉伸，再配text-overflow: ellipsis截断标题/描述 - 避免在卡片内用
height: 100%，它依赖父容器明确高度，而 Grid 行高是动态的
响应式要不要写 @media，还是全靠 Grid 自动处理
多数情况，grid-template-columns 配合 minmax() 和 auto-fill 已足够应对从手机到桌面的连续变化，根本不需要 @media。只有两种例外值得加断点：
- 需要彻底切换布局形态，比如桌面端阶梯式、移动端堆叠为单列
- 某层卡片需等高，但小屏下语义优先级下降，必须放弃拉伸改用
align-items: start
注意：断点里重置 grid-row-start 时，必须用 !important 或更高权重选择器，否则浏览器可能沿用旧轨道计数，导致卡片卡位异常——Grid 轨道计数不会自动归零，得手动干预。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
