repeat(min(4, max-content), minmax(200px, 1fr))) 可实现最多4列的动态限制，每列最小200px且均分剩余空间，但需注意 Safari 等旧浏览器兼容性问题。
grid-template-columns 配合 repeat() 无法直接限制“最大列数”
很多人以为 repeat(auto-fit, minmax(200px, 1fr))) 就能“最多显示 4 列”，其实它只控制**最小列宽和自动填充行为**，实际列数完全由容器宽度决定。真正要硬性限制列数上限（比如“不管多宽，最多 4 列”），必须结合 grid-template-columns 的显式轨道定义 + 媒体查询或 min() 函数。
用 min() 函数在单条声明中实现动态列数上限
CSS min() 可以让列数“不突破某值”，适合响应式但不想写多个媒体查询的场景。关键点是：把 repeat() 的数量参数替换成 min(N, ...) 表达式。
/* 最多 4 列，每列至少 200px，剩余空间均分 */
.container {
display: grid;
grid-template-columns: repeat(min(4, max-content)), minmax(200px, 1fr));
}⚠️ 注意：min(4, max-content) 在部分旧浏览器（如 Safari max-content 作为第二个参数。更稳妥的写法是用 min(4, 100vw / 200) 这类计算，但需注意单位兼容性。
-
min(4, 1fr 1fr 1fr 1fr)❌ 无效 ——min()不能直接比较轨道列表 -
min(4, 100vw / 250)✅ 可行，但需确保除法结果为整数（浏览器会向下取整） - 实际列数 =
min(指定上限, 容器宽度 ÷ 最小列宽)，本质仍是流式计算
用媒体查询分段控制列数上限（最兼容、最可控）
当需要精确控制不同断点下的最大列数（例如：手机最多 1 列，平板最多 2 列，桌面最多 4 列），媒体查询仍是首选。重点在于：每个断点里用固定数量的 1fr，而非依赖 auto-fit。
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 480px) {
.container {
grid-template-columns: 1fr;
}
}
@media (min-width: 481px) and (max-width: 768px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 769px) {
.container {
grid-template-columns: repeat(4, 1fr);
}
}这样写的好处是列数绝对可控，且所有主流浏览器都支持。但要注意：
- 不要混用
repeat(4, minmax(200px, 1fr))和媒体查询限制——minmax()仍可能因内容撑开导致列宽超预期 - 如果内容高度差异大，建议同时设置
grid-auto-rows: minmax(100px, auto)避免行高塌陷 - 使用
gap时，总宽度 = 列宽 × 列数 + gap × (列数 − 1)，需在媒体查询中一并考虑
为什么不用 grid-auto-flow: column？
有人想靠 grid-auto-flow: column + grid-template-rows 控制列数，但这属于反向布局，实际是限制“行数”，不是“列数”。而且它无法与 auto-fit 共存，容易导致内容溢出或空白间隙不可控。
真正需要列数封顶，就老实用 grid-template-columns 显式声明轨道数量。动态上限靠 min()，静态分段靠媒体查询——没有捷径，也没有万能函数。
