响应式等宽列应使用grid-template-columns: repeat(auto-fit, minmax(最小宽度, 1fr)))，auto-fit自动调节列数，minmax保障列宽下限与均分，避免flex因内容干扰导致的不均分或溢出。
用 grid-template-columns: repeat(auto-fit, minmax(...))) 实现响应式等宽列
直接写死列数（比如 repeat(3, 1fr)）在屏幕变窄时容易溢出或留白，真正实用的等宽方案得兼顾容器宽度变化。核心是让 Grid 自动算列数，同时保证每列有最小宽度、最大能均分。
-
minmax(200px, 1fr)表示：每列至少 200px，剩余空间平分 —— 这是防压缩的关键 -
auto-fit会让空轨道收缩消失，比auto-fill更适合内容不固定的情况 - 整行写法：
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)));
为什么不用 flex + flex-basis 均分？
Flex 的 flex: 1 看似简单，但实际会受内容长度影响：文字过长撑开某一项，其他项就被压缩；加 min-width 又可能换行错乱。Grid 的列宽控制是“轨道级”的，不受子元素内容干扰。
- Flex 下
flex-basis: 0+flex-grow: 1能勉强均分，但遇到white-space: nowrap或图片时极易破坏布局 - Grid 中即使某个子项内含超长 URL，只要没设
min-width覆盖轨道定义，列宽依然稳定
需要固定列数时，1fr 和 fit-content() 的区别
如果明确只要 4 列且不允许增减，repeat(4, 1fr) 最干净。但若想让列宽随内容“自适应收紧”，就得换思路：
-
repeat(4, fit-content(25%))：每列最大占容器 25%，但实际宽度由内容决定 —— 不是等宽，慎用 -
repeat(4, minmax(max-content, 1fr))：列宽至少容纳自身内容，再均分剩余空间 —— 适合内容长度差异大但又要对齐的场景 - 真要等宽+内容适配，还是回到
minmax(某值, 1fr)，把“某值”设为内容最小合理宽度（如按钮最小 120px）
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)));
gap: 12px;
}
注意 gap 不影响列宽计算，但会参与容器总宽分配；如果列内有 padding，别忘了它会叠加在 minmax 的基础上 —— 容易导致实际可写内容区域比预期窄。
立即学习“前端免费学习笔记（深入）”；
