结论：grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 即可实现列数随容器宽度自动增减，每列最小250px、有剩余空间则均分，无需媒体查询，是现代CSS Grid自适应的默认解。
grid-template-columns: repeat(auto-fit, minmax()) 是核心
直接说结论：不用写一堆媒体查询，grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 就能实现列数随容器宽度自动增减，且每列最小 250px、有空间就均分。这是现代 CSS Grid 自适应的“默认解”，不是备选方案。
关键点在于三个函数/值的协同：
-
minmax(250px, 1fr)定义单列弹性范围：不能窄于 250px，宽可无限伸展（1fr表示剩余空间的 1 份） -
repeat(auto-fit, ...)让浏览器反复尝试塞入尽可能多的该列——塞不下了就换行，空余列直接塌缩，已有列自动拉宽填满 - 对比
auto-fill：它会把所有可能列槽位都占上（哪怕没内容），容易导致空白列撑开布局，auto-fit更符合“内容驱动”的直觉
SCSS 可以封装 minmax 的临界值，但别过度抽象
有人喜欢用 SCSS 变量控制最小宽度，比如：$grid-min-item-width: 250px，然后写 minmax(#{$grid-min-item-width}, 1fr)。这可行，但要注意：
- 别把
repeat()或auto-fit也包进 mixin——它们是语义固定的关键字，硬抽成参数反而难 debug - 如果项目需要多套网格（如卡片列表用 250px，仪表盘用 320px），用 class 区分比用 SCSS 循环生成更可控，例如
.grid--cards和.grid--dashboard - SCSS 的
@function不适合动态计算列数——列数由浏览器实时计算，CSS 里没有“运行时变量”概念，别试图用calc()去算列宽比例
gap 和 grid-auto-rows 影响实际填充效果
gap 看似只是间距，但它参与可用宽度计算。例如容器宽 800px，设 gap: 20px，那两列之间就占掉 20px，三列之间占 40px——这会直接影响 auto-fit 能塞下几列。
立即学习“前端免费学习笔记（深入）”；
另一个常被忽略的是 grid-auto-rows。当内容高度不一致时（比如有的卡片文字多、有的少），默认行为是各行按内容撑高，导致网格“参差不齐”。加一句 grid-auto-rows: minmax(120px, auto) 能让每行至少 120px 高，视觉更整齐。
- 若需严格等高（如瀑布流式错位不接受），得配合
align-items: stretch（默认值）+ 显式设置grid-auto-rows -
gap接受em、rem，但慎用百分比——它基于网格容器的内联尺寸（inline size），非块级尺寸，易出意料
IE 不支持，别在 .grid-container 上 fallback 到 float
如果你还考虑 IE11，display: grid 必须降级。但别用 float + width: 33.33% 这类老方案——它无法响应式重排，且父容器塌陷问题至今无优雅解。
更现实的 fallback 是：
- 用
@supports not (display: grid)包裹 Grid 样式，确保旧浏览器跳过 - 对旧浏览器单独提供 Flexbox 布局（
display: flex; flex-wrap: wrap），用flex-basis模拟 minmax 行为，虽然不能精确等效，但体验差距可控 - 完全放弃 IE 支持，现在全球 IE 使用率已低于 0.1%，强行兼容只会拖慢开发节奏和代码可维护性
真正容易被忽略的点是：自适应网格的“自适应”只发生在容器宽度变化时，它不会监听子元素内容增减或字体加载完成后的重排。如果卡片内含异步图片或动态文本，记得用 grid-auto-flow: dense 避免留下大片空白，但这会打乱 DOM 顺序——权衡取舍就在这一行声明里。
