repeat(auto-fit, minmax(200px, 1fr)) 动态生成列数：每列最小200px、最大均分剩余空间；auto-fit 合并空轨道，避免空白列，需配合 display: grid 使用，容器宽度不足时会退化为单列。
repeat(auto-fit, minmax()) 是怎么工作的
它不是“创建表格”，而是用 grid 模拟表格的弹性布局行为。浏览器里真正的 <table> 无法响应式地自动增减列数，而 <code>repeat(auto-fit, minmax(200px, 1fr)) 能让容器根据可用宽度，动态决定显示几列，且每列最小 200px、最大均分剩余空间。
关键点在于：auto-fit 会合并空轨道（即没有子元素的网格轨道），auto-fill 则不会——这直接决定是否出现“看不见的空白列”。
-
minmax(200px, 1fr)表示：单列至少 200px 宽，最多拿走等份的自由空间 - 必须配合
display: grid和grid-template-columns使用，不能单独存在 - 子元素不需要设
grid-column，默认按源顺序流式填入
为什么加了 auto-fit 还是只有一列
常见原因是容器宽度太小，或子元素内容撑不开最小宽度。比如设了 minmax(300px, 1fr)，但父容器只有 280px 宽，那连一列都放不下，结果就是所有子元素堆成一列（实际是“换行”到下一行，因为 grid-auto-rows 默认隐式创建新行）。
- 检查父容器是否有固定宽/内边距/边框挤压可用空间
- 用浏览器开发者工具选中容器，看 computed 的
grid-template-columns值——如果显示为none或空数组，说明没生成任何列轨道 - 临时加
border: 1px solid red看容器真实尺寸 - 把
minmax()的最小值调低（如150px）快速验证逻辑是否生效
如何让每行严格对齐（类似表格的thead/tbody）
CSS Grid 本身不区分“表头”和“数据行”，要模拟表格结构，得靠显式轨道定义 + 子元素定位。单纯靠 repeat(auto-fit, ...) 只能搞定列数弹性，行结构需额外控制。
- 给第一行子元素（如表头）加
grid-column: 1 / -1占满整行，再用grid-row控制其位置 - 后续数据行保持默认流式填充，但需确保每行子元素数量一致，否则会错位
- 更稳妥的做法：用
grid-template-rows: auto repeat(autofit, ...)配合grid-row-start手动分区，但复杂度陡增 - 真有强表格语义需求（排序、筛选、可访问性），优先用
<table> + JS 动态增删 <code><colgroup></colgroup>，别硬套 Grid兼容性和性能要注意什么
repeat(auto-fit, ...)在 Chrome 57+、Firefox 52+、Safari 10.1+ 支持良好，IE 完全不支持——如果还要兼容 IE，这条路走不通。- 大量子元素（比如上千个单元格）时，
auto-fit触发的重排开销比auto-fill小，但它仍依赖浏览器计算每个轨道的尺寸，性能不如固定列数 - 避免在
minmax()里写过于复杂的表达式，比如minmax(calc(100vw / 3), 1fr)，某些旧版 Safari 会解析失败 - 移动端注意
viewport设置，若漏了<meta name="viewport" content="width=device-width">，100vw可能远超屏幕宽度，导致列数异常
真正难的不是写对这行 CSS，而是判断什么时候该用它、什么时候该退回去用传统表格或 JS 渲染。弹性列只是表象，数据关系、交互预期、辅助技术支持，这些才是决定方案的硬约束。
- 大量子元素（比如上千个单元格）时，
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
