Flex靠flex:1均分剩余空间，需父容器设display:flex且无固定宽；Grid用repeat(auto-fit,minmax(250px,1fr))动态定列数并弹性伸缩列宽，gap替代margin更精准。
Flex 实现多列等宽自适应布局的关键点
Flex 本身不直接“自动分配列宽”，而是靠 flex: 1 或 flex: auto 让子项均分剩余空间，前提是父容器设为 display: flex 且子项不设固定宽度。
- 用
flex: 1最稳妥：每个子项占据相等的可用空间，忽略内容宽度差异（除非内容过长触发最小宽度限制） - 避免只写
flex: 1 1 auto却忘了父容器width或max-width—— 若父容器没宽度约束，Flex 容器可能撑满整个 viewport，导致列看起来“不自适应” - 注意
min-width: auto（浏览器默认）会阻止列收缩到文字换行以下，可显式设min-width: 0防止溢出 - 示例：
.container { display: flex; }
.item { flex: 1; min-width: 0; }
Grid 实现列数动态、列宽自动适配的写法
Grid 的 repeat(auto-fit, minmax(...)) 是实现响应式多列的核心，它能根据容器宽度自动计算列数，并让每列宽度在设定范围内弹性伸缩。
- 必须用
auto-fit（不是auto-fill）：前者会合并空轨道，后者保留所有生成的列轨道，影响实际列宽分配 -
minmax(250px, 1fr)表示“单列最小 250px，最大均分剩余空间”，这是最常用组合；若写成minmax(250px, 300px)，列宽就不再自适应，而会固定在区间内 - 别漏掉
gap：Grid 列间间隙不会计入minmax的计算，但会影响实际可容纳列数 - 示例：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))));
gap: 16px;
}
Flex 和 Grid 在“列宽自动分配”上的本质区别
Flex 是一维布局，列宽分配依赖子项的 flex 属性和内容挤压行为；Grid 是二维布局，列宽由轨道定义驱动，更可控也更符合“自动分配”的直觉。
- Flex 下，如果某列内容特别长（如超长 URL），即使写了
flex: 1，它也可能撑开整行——需配合overflow: hidden或text-overflow: ellipsis手动截断 - Grid 下，只要
minmax()的最小值合理，单列就不会被内容撑破，1fr天然保证均分，无需额外防溢出（除非子项自己设了white-space: nowrap） - 兼容性上，
flex: 1支持 IE10+，而grid-template-columns: repeat(auto-fit, ...)在 Safari 10.1+ 才稳定，旧版 Safari 可能需要降级方案
实际项目中容易忽略的细节
自动分配列宽不是设个属性就完事，真实场景里常因几个小配置失效。
立即学习“前端免费学习笔记（深入）”；
- 父容器没设
width或被浮动/绝对定位干扰，导致 Flex/Grid 容器宽度为 0 —— 检查 computed width 是否为预期值 - 子项有
margin或padding，尤其在 Grid 中，它们不参与minmax计算，但会挤占可用空间，建议用gap替代 margin - Flex 下误用
justify-content: space-between以为能均分列宽，其实它只控制主轴对齐，不影响单个子项宽度 - Grid 中写了
grid-auto-rows: 1fr却期望列宽也变，这是混淆行列概念——列宽由grid-template-columns控制，行高才由grid-auto-rows影响
