自适应网格应使用 repeat(auto-fit, minmax(280px, 1fr))) 实现列数动态调整，配合媒体查询在大屏限列、小屏单列，并注意 gap、子项 min-width 和父容器宽度约束。
用 grid-template-columns 做自适应网格，关键不是写死列数，而是用函数让列宽“自己看屏幕决定”。大屏太空、小屏太挤，往往是因为用了固定值（比如 1fr 1fr 1fr）却没考虑容器变化，或漏掉了响应式断点的配合。
用 repeat() + minmax() + auto-fit 动态撑满
这是最常用也最有效的组合，一行代码就能让网格在不同宽度下自动调整列数：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)));
说明：
– minmax(280px, 1fr) 表示每列最小 280px，最大尽可能均分剩余空间；
– auto-fit 会让空列自动收缩消失，把空间让给可见列；
– 屏幕变宽时，自动多出一列；变窄时，列数减少，但每列不会小于 280px。
建议：
• 把 280px 换成你卡片/模块的最小可用宽度（比如文字不换行、图片不压缩的临界值）；
• 不要用 auto-fill 替代 auto-fit，它会保留空列，导致小屏出现空白或滚动条。
结合媒体查询微调断点下的列行为
纯 auto-fit 能解决大部分问题，但有时需要更精细控制——比如大屏下限制最多 4 列，避免单列过宽失衡：
- 默认用动态列（小屏到中屏）：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))); - 大屏加限制（比如 ≥1200px）：
@media (min-width: 1200px) { grid-template-columns: repeat(4, 1fr); } - 超小屏（如手机竖屏）可强制单列：
@media (max-width: 480px) { grid-template-columns: 1fr; }
注意：断点数值不是固定的，应根据实际内容测出来——打开浏览器调试器，拖动窗口观察哪一刻文字开始拥挤或留白突增，那就是该设断点的地方。
立即学习“前端免费学习笔记（深入）”；
避免常见坑：gap、min-width 和嵌套容器
再好的 grid-template-columns 也会被其他样式拖累：
-
gap 太大：大屏下 gap ×（列数−1）会吃掉大量宽度，让内容显得稀疏。建议用相对单位，如
gap: clamp(0.5rem, 2vw, 1.5rem)； -
子项设了 min-width：如果网格项内部写了
min-width: 300px，它会顶住minmax()的下限，导致换行或溢出； -
父容器没设 width 或 max-width：网格依赖容器宽度计算，若外层是
display: inline-grid或未约束宽度，行为不可控。
基本上就这些。核心就一句：让列宽有弹性下限，让列数有自动伸缩能力，再辅以少量断点收口。不复杂，但容易忽略 minmax 里的两个参数分别管什么。
