关键在于minmax()中最小值设为刚性下限（如200px），并选用auto-fit而非auto-fill：浏览器按容器宽÷最小宽向下取整得列数，剩余空间以1fr均分；auto-fit收缩空轨道实现内容贴合，auto-fill则保留空轨道用于栅格对齐。
能，而且非常可靠——关键不是“能不能”，而是minmax()里怎么写最小值，以及选auto-fit还是auto-fill。
为什么 auto-fit + minmax(200px, 1fr) 就能自动换列
浏览器会持续计算：容器宽度 ÷ 每列最小宽度（这里是 200px），向下取整得到最多能放几列；然后把剩余空间均分给这些列（1fr）。只要容器缩到不够放下两列（比如 399px），它就自动变成单列。
-
auto-fit会收缩空轨道，让实际列数“贴合内容”，适合卡片、列表等不确定数量的场景 -
auto-fill保留空轨道，适合需要对齐栅格线的固定结构（如表单字段排布） - 最小宽度设太小（如
100px），小屏下仍可能撑出两列，违背“手机必单列”预期 - 最大值用
1fr而非100%，避免子项盒模型计算冲突
如何强制最多两列、且 150px 下退化为单列
普通 minmax(150px, 1fr) 在窄屏下仍可能维持两列（比如容器宽 300px，刚好卡住），这时要用 max() 动态抬高下限：
.cont {
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(max(150px, 34%), 1fr)));
}-
max(150px, 34%)意味着：宽度足够时（≥ ~300px），34% ≈ 150px+，允许两列；宽度再小，34% 150px，但此时两列总宽 > 容器宽，自动退为一列 - 34% 不是 magic number，它是经验阈值：略大于 100%/3（≈33.33%），防三列挤入
- 若
gap加大到30px，建议微调为35%～36%，否则可能在临界宽度出现跳变 - 千万别用
min(150px, 100%)——它会让最小值随屏幕缩小而变小，彻底失去保底作用
常见错误：Flexbox 方案为什么不如 Grid 精准
Flexbox 的 flex-basis: calc(50% - 10px) 看似能模拟双列，但实际行为不可控：
立即学习“前端免费学习笔记（深入）”；
- 当容器宽 =
299px，calc(50% - 10px)≈139.5px，两列总宽 ≈279px，仍能塞下，无法保证 ≤150px 时强制单列 - Flex 不支持“列数上限”语义，只能靠媒体查询硬切，一旦设计稿调整列宽，所有断点都要重算
- Grid 的
auto-fit是布局引擎原生能力，无需 JS 或 polyfill，Chrome 66+、Firefox 61+、Safari 16.4+ 全支持 - Flex 天然不等高，Grid 子项默认拉伸对齐，省掉一堆
align-items和 hack
真正容易被忽略的点是：minmax 的第一个参数必须是“刚性下限”，不能让它随视口动态坍缩；而 max() 是目前唯一能在 CSS 中实现“保底 + 弹性”双重约束的手段。写错这里，整个响应式逻辑就失效了。
