CSS Grid 的 repeat(auto-fit, minmax(200px, 1fr))) 实现自适应等宽多列布局，列数随容器宽度动态变化，最小宽度200px，剩余空间均分，无需媒体查询；配合 fit-content() 或混合单位可实现不等宽列，gap 和 border-box 确保间距与尺寸精准。
多列布局中手动计算每列宽度确实麻烦，尤其内容动态变化时更难维护。用 CSS Grid 的 fr 单位和 auto-fit/auto-fill 配合 minmax()，就能让浏览器自动分配合理列宽，无需手算。
用 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)))
这是最常用也最实用的写法。它表示：在容器内尽可能多地放入最小 200px、最大等分（1fr）的列，空间不够就自动换行或缩列。浏览器会根据容器宽度实时重算列数和每列宽度。
- 200px 是单列最小宽度，防止内容被过度挤压
- 1fr 表示剩余空间均分，保证列宽自适应且公平
- auto-fit 会折叠空轨道，比 auto-fill 更适合响应式卡片列表
避免固定列数，改用内容驱动布局
别写 repeat(4, 1fr) 这类固定列数的声明。一旦屏幕变窄，四列就会横向溢出或出现滚动条。Grid 的优势正在于“列数不写死”，靠 minmax() + auto-fit 让列数随容器伸缩。
- 小屏下可能只显示 1 列，中屏 2 列，大屏 3–4 列
- 所有列始终等宽，且不会小于设定的最小值
- 文字、图片、按钮等内容自然撑开，无需额外 media query
需要不等宽列？用 fit-content() 或混合单位
如果某列要“刚好包住内容”（比如操作按钮列），可用 fit-content(200px)，它会让该列宽度等于内容宽度，但不超过 200px；也可混用 150px 1fr 2fr，让关键列固定、其余列弹性分配。
- fit-content() 适合头像、图标、开关等紧凑型内容列
- 混合单位适用于主内容区 + 侧边栏/操作栏的经典结构
- 仍建议搭配 minmax() 控制弹性列的上下限，防止单列过窄或过宽
注意 gap 和 box-sizing 对齐效果
使用 gap 替代 margin 布局更干净，但要注意父容器是否设置了 box-sizing: border-box。Grid 容器默认是 content-box，若子项有 padding/border，又没设 box-sizing，可能导致实际宽度超出预期。
- 统一加
* { box-sizing: border-box }可避免多数尺寸偏差 - gap 会自动避开容器边缘，不用额外减去 margin
- 想让首尾列贴边？gap 没问题；想留白？给容器加 padding 即可
