推荐用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 实现自适应卡片布局，配合 gap 控制间距、align-items: stretch 保证等高、响应式仅调小 minmax 最小值，并注意图片 max-width 和容器宽度继承。
grid-template-columns 配合 minmax() 实现卡片自适应
卡片宽度不能写死，否则在不同屏幕下会溢出或留白过多。minmax() 是关键：它让每列最小为一个合理值（比如 280px），最大撑满可用空间，同时配合 auto-fit 或 auto-fill 自动计算列数。
-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))—— 推荐用auto-fit，空列会被压缩掉，更紧凑 -
auto-fill会保留空轨道，适合需要对齐网格线的场景（如动画占位） - 数值
280px不是 magic number，应基于卡片最小可读宽度（含 padding + margin）估算 - 如果容器有 padding，记得用
box-sizing: border-box避免计算偏差
gap 替代 margin 实现安全间距
卡片内部若有 margin，容易导致外边距合并或响应失效；gap 是 Grid 原生间距控制，只作用于网格项之间，不触发重排，语义清晰且兼容性好（Chrome 66+、Firefox 63+、Safari 16.4+ 支持完整）。
- 用
gap: 1rem统一控制行列间距，比分别写margin-right/bottom更可靠 - 避免在卡片元素上同时用
gap和margin，尤其不要用margin: auto居中——Grid 有自己的对齐机制 - 若需首行/末行无上/下 gap，不能靠 margin 抵消，应改用
padding容器内边距模拟
卡片内容高度不一致时用 align-items: stretch
默认 Grid 会让所有卡片拉伸至最高项高度，但前提是卡片容器未设置 height 或 max-height，且子元素没用 align-self: start 覆盖。
- 确保卡片直接子元素（如标题、描述、按钮）没设
height或flex相关属性干扰拉伸 - 如果想取消等高，加
align-items: start到 grid 容器即可，无需改每张卡片 - 文字截断建议用
display: -webkit-box+-webkit-line-clamp，而非依赖高度固定
响应式断点只需调整 minmax 最小值
不需要为每个屏幕尺寸重写整个 grid-template-columns，只需在媒体查询里调小 minmax() 的第一个参数。
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) { .grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }- 避免在断点中改
1fr为具体像素——那会破坏自适应本质 - 如果小屏下仍想保持单列，可直接写
grid-template-columns: 1fr，比套minmax()更明确 - 注意 Safari 旧版本对
minmax()在媒体查询中的解析有 bug，必要时加@supports (display: grid)包裹
max-width: 100% 和 height: auto，它们会撑破网格轨道；还有就是忘了给 grid 容器设 width: 100% 或继承父宽——Grid 不会自动“填满”未知宽度的父容器。 
