正确设置为 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))，其中 300px 是卡片最小合理宽度，auto-fit 确保列数动态适配容器宽度且不留空轨道。
grid-template-columns 怎么设才不踩坑
卡片式布局最常犯的错，是直接写 grid-template-columns: repeat(3, 1fr) 就以为万事大吉。实际在小屏或窄容器里，三列会挤成一列超窄卡片，文字换行混乱，图片被拉伸变形。
正确做法是结合 minmax() 和 auto-fit 动态响应：
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))); / 300px 是单张卡片最小合理宽度，低于它就自动减少列数 /
注意：auto-fit 会合并空余轨道，auto-fill 则保留空轨道——卡片布局必须用 auto-fit，否则右侧留白严重。
立即学习 “ 前端免费学习笔记（深入）”；
卡片内边距与 gap 的分工要明确
gap 控制卡片之间的间距，padding 控制卡片内容到边框的距离。混用会导致视觉节奏错乱，比如：
- 用
padding代替gap→ 卡片在网格边缘无外边距，贴边难看 - 只设
gap不设padding→ 文字紧贴卡片边界，呼吸感差
推荐组合：
.card-grid {display: grid; gap: 1.5rem; /* 卡片间留白 */} .card {padding: 1.25rem; / 内容内边距 / border-radius: 8px; background: #fff; }
卡片高度不一致时如何对齐内容
真实数据中标题行数、描述长短不同，导致卡片高度参差——align-items: start 是默认行为，但常被忽略，结果就是底部按钮或标签上下浮动，视觉割裂。
关键控制点：
-
align-items: start确保所有卡片内容顶部对齐（推荐） - 若需底部操作区统一高度，给
.card设display: flex; flex-direction: column;，再对按钮用margin-top: auto - 避免用
height: 100%强制拉伸，会破坏文字可读性
示例（底部按钮吸附）：
.card {display: flex; flex-direction: column;} .card-actions {margin-top: auto; padding-top: 0.75rem;}
响应式断点别只靠媒体查询硬切
纯靠 @media 改 grid-template-columns 容易漏掉中间尺寸，比如 平板 横屏（768px）和桌面窄窗（900px）之间出现“两列半”的尴尬。
更鲁棒的做法是：
- 继续用
repeat(auto-fit, minmax(……))主逻辑 - 仅在必要处微调最小宽度：如
minmax(280px, 1fr)→minmax(320px, 1fr) - 避免为每个断点写完整 grid 声明，优先让
minmax()自适应
真正需要媒体查询的，通常是改 gap 或 padding，比如小屏减小间隙：
@media (max-width: 480px) {.card-grid { gap: 1rem;} .card {padding: 0.875rem;} }grid 实现卡片布局的复杂点不在语法，而在对「最小可用宽度」和「内容弹性边界」的判断——多测几组真实数据，比死记参数更有用。
