核心是用 repeat(auto-fill, minmax(250px, 1fr))) 实现列数自适应：每列最小250px，剩余空间均分，auto-fill 保持列宽稳定，gap 控制间距；minmax第二参数禁用固定像素，推荐 1fr。
用 grid-template-columns 配合 repeat() + minmax() 实现列数自适应
核心是不用媒体查询硬写断点，而是让 CSS 自己算：每列至少多宽、最多能塞几列。浏览器会根据容器宽度动态决定列数。
常见错误是只写 repeat(auto-fill, 1fr) —— 这样列宽会被强行拉伸，失去“固定最小宽度”的控制意图。
-
minmax(250px, 1fr)表示：每列最小 250px，剩余空间均分（1fr是上限） -
repeat(auto-fill, ...)让网格尽可能多地填满容器，不够一列就不加 - 搭配
gap控制间距，避免列间挤在一起
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)));
gap: 1rem;
}
为什么 auto-fill 比 auto-fit 更常用
两者都用于自动计算列数，但行为关键不同：当剩余空间不足以放下一整列时，auto-fill 仍保留空轨道（可能留白），而 auto-fit 会把空轨道收缩掉，把空间重新分配给已有列。
多数布局需要“保持列宽稳定”，比如卡片列表——你不想让 3 张卡突然撑满全宽，破坏视觉节奏。
立即学习“前端免费学习笔记（深入）”；
- 用
auto-fill：列宽守得住，适合内容长度接近的场景 - 用
auto-fit：适合强调“填满容器”且允许列宽变化的展示型布局 - 实际效果差异在小屏或窄容器下最明显，建议真机调试时对比看
响应式微调仍需断点？这些情况绕不开媒体查询
minmax() 解决了大部分连续缩放问题，但有些需求它做不到：
- 移动端强制单列（哪怕容器够宽）——例如表单字段必须垂直堆叠
- 某宽度下切换为等宽三列（而非按最小宽度算出的四列）
- 配合 JS 动态控制（如用户点击“展开更多列”）
这时就得补媒体查询，但只需覆盖例外情形，不是从头写一套：
@media (max-width: 480px) {
.grid {
grid-template-columns: 1fr;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.grid {
grid-template-columns: repeat(2, minmax(280px, 1fr)));
}
}
注意 minmax() 第二个参数不能写死像素值
像 minmax(250px, 300px) 看似合理，但会导致网格在某些宽度下“卡住”：容器宽 950px 时，理论上可放 3 列（3×300=900），但第 4 列因超 300px 被拒，最终只显示 3 列并留白——而你本意可能是让它缩到 250px 塞进 4 列。
所以第二参数强烈推荐用 1fr 或 max-content，让浏览器有伸缩余地：
-
minmax(250px, 1fr)✅ 安全通用 -
minmax(250px, max-content)⚠️ 仅当内容天然不换行且宽度可控时考虑 -
minmax(250px, 300px)❌ 容易导致列数突变或留白
列数不是靠人猜出来的，是容器宽度、最小列宽、间隙三者实时博弈的结果。盯着控制台的 computed styles 看 grid-template-columns 的实际解析值，比背规则更管用。
