用 auto-fit 搭配 minmax(280px, 1fr) 实现自动填满剩余空间，有内容的列等宽填满整行，空列收缩消失；需确保父容器有可测量宽度，并规范子项尺寸与文本换行。
要用 Grid 实现“自动填满剩余空间”的效果，核心是用 auto-fit 搭配 minmax()，而不是 auto-fill。它会让有内容的列均分容器宽度，空列直接收缩消失，视觉上就是“刚好填满、不留白、不溢出”。
用 repeat(auto-fit, minmax()) 是最稳妥写法
这是现代响应式卡片布局的标准解法：
-
repeat(auto-fit, minmax(280px, 1fr))：每列最小 280px，容器够宽就多列，不够就自动减少列数，所有有内容的列等宽填满整行 - 相比 auto-fill，auto-fit 不留空轨道，小屏下不会出现横向滚动条或右侧大片空白
- 适合商品列表、仪表盘卡片、文章摘要墙等“内容即布局”的场景
minmax() 的两个参数必须写对
第二参数只能是 1fr 或 max-content，其他写法会失效：
- ✅ 正确：
minmax(280px, 1fr)—— 1fr 表示“等分剩余空间”，多个列一起算 - ❌ 错误：
minmax(280px, 2fr)—— 浏览器静默降级为 max-content，列宽失控 - ⚠️ 注意：1fr 不是固定像素，它依赖容器总宽和其他轨道尺寸；如果父容器宽度不可计算，整个逻辑就无法启动
确保父容器有可测量的宽度
Grid 自动填充不是“凭空算”，它需要明确的 inline size（通常是 width）：
- 避免用
display: inline-grid，它默认按内容宽度，不触发自动列计算 - 如果 Grid 在 Flex 容器里，记得给它加
flex-basis: 100%或width: 100% - 别用 float 包裹 Grid 容器，否则网格格式化上下文不成立
- 调试时加
outline: 1px solid red看父容器是否真有宽度
别让子项自己撑破布局
再好的 grid-template-columns，也架不住子项“不守规矩”：
- 图片记得加
max-width: 100%; height: auto - 长文本防溢出：
word-break: break-word或overflow-wrap: break-word - 子项是 flex 容器时，加上
min-width: 0防止隐式最小宽度劫持计算 - 避免
white-space: nowrap导致单行文本强行拉宽列
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
