用grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))可实现列数随容器宽度自动增减，无需媒体查询；auto-fit拉伸剩余空间，auto-fill保留空列；配合gap和justify-content: center优化对齐与间距；可用clamp()限制单列宽在200px–300px间。
用 grid-template-columns 配合 repeat(auto-fit, minmax(...)) 就能自动调整列数，容器变宽多一列，变窄少一列，无需媒体查询。
auto-fit 与 auto-fill 的区别
auto-fit 会把剩余空间分配给已有列（可拉伸），auto-fill 则保留空列占位（不拉伸）。做响应式布局一般选 auto-fit，更实用。
基础写法：固定最小宽度 + 自适应最大宽度
比如每列至少 200px，最多填满容器：
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))-
minmax(200px, 1fr)表示单列宽度在 200px 到“均分剩余空间”之间弹性变化 - 容器宽度 ≥ 400px → 显示 2 列；≥ 600px → 显示 3 列，以此类推
- 列数由浏览器根据容器宽度和 minmax 规则实时计算，不是预设断点
配合 gap 和 justify-content 更自然
加间隙避免拥挤，居中对齐小屏时的单列：
立即学习“前端免费学习笔记（深入）”；
-
gap: 1rem控制行列间距（推荐用 gap 而非 margin） -
justify-content: center让列整体居中，窄屏下单列不贴左 - 如果希望列左对齐且不留空隙，用
justify-content: start
限制最大列数防止过密
有时列太多导致内容太窄，可用 minmax() 加上限，或嵌套 clamp()：
- 单列宽度不会小于 200px，也不会大于 300px，超出部分靠增加列数消化
- 等效于“最多每行 5 列（假设容器宽 1500px）”，但逻辑更简洁、无硬编码
