repeat(3, 1fr) 不响应式，小屏下强制三列导致内容挤压；应改用 repeat(auto-fit, minmax(300px, 1fr)) 实现动态列数，或配合媒体查询精确控制断点。
直接用 grid-template-columns: repeat(3, 1fr) 能实现三列等宽，但**它不响应式**——小屏下三列会强行挤在一起，文字换行混乱、卡片被压扁。真要响应式，必须让列数随容器宽度动态变化，而不是死守“3列”。
为什么 repeat(3, 1fr) 在小屏上会出问题
这个写法强制浏览器渲染恰好 3 列，每列分得 1/3 宽度。当容器宽度降到 300px，每列只剩 100px，内容没空间展开，视觉和可读性都崩了。它不关心设备或视口，只认父容器当前宽度。
- 常见现象：手机上看仍是三列，但卡片高度暴涨、文字密集换行、按钮点击区域变小
- 根本原因：没有设置最小列宽约束，也没有允许列数减少的机制
- 调试技巧：在开发者工具的 Styles 面板里看 computed 的
grid-template-columns值，确认它是否真的还是1fr 1fr 1fr
用 repeat(auto-fit, minmax(300px, 1fr)) 替代硬编码列数
这才是响应式三列（及更多）布局的现代解法。它让浏览器自己算：当前宽度最多能塞几个「至少 300px」的列？能塞 3 个就三列，只能塞 1 个就单列。
-
minmax(300px, 1fr)表示每列最小 300px，剩余空间均分；设太大会导致小屏无法显示一整列（如设成minmax(400px, 1fr)，iPhone SE 视口仅 375px，结果是空网格） -
auto-fit会折叠空轨道；换成auto-fill会保留所有可能列位，小屏出现横向滚动条或右侧大片留白 - 必须确保父容器没被
max-width锁死，且没继承white-space: nowrap或overflow: hidden，否则 Grid 换行逻辑被阻断
需要精确控制断点时，用媒体查询 + repeat()
当内容语义明确、设计稿有固定断点（比如“≥1024px 三列，≥768px 两列，其余单列”），媒体查询反而更可控，避免 auto-fit 在临界宽度下抖动（比如 767px 和 769px 切换列数）。
- 桌面端：
grid-template-columns: repeat(3, 1fr) - 平板端：
@media (max-width: 1023px) { grid-template-columns: repeat(2, 1fr); } - 手机端：
@media (max-width: 767px) { grid-template-columns: 1fr; } - 统一用
gap控制间距，别混用margin，避免外边距折叠导致错位
等高与对齐容易被忽略的细节
Grid 默认让同行列内子项等高，但前提是子项没设 height 或 min-height 干扰拉伸，且父容器没设 grid-auto-rows: auto 之类限制。
- 如果卡片内容高度差异大，又想视觉整齐，加
align-items: stretch（默认值，通常不用显式写） - 若某张卡片内部用了
display: flex且子元素设了align-self: flex-start，会破坏整体等高效果 - 小屏单列时，
gap仍生效，但行间距可能显得过大，可配合媒体查询微调：@media (max-width: 767px) { gap: 12px; }
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
