fr单位实现等比宽度分配时，grid-template-columns: 1fr 1fr 1fr使三列均分剩余空间；混用px与fr时，fr仅分配扣除固定宽度后的剩余空间；需设min-width: 0等防止内容撑开破坏比例。
用 fr 单位实现等比宽度分配
直接写 grid-template-columns: 1fr 1fr 1fr 就能让三列均分容器宽度。每个 fr 表示“剩余可用空间的等份”，不是固定像素，也不受内容尺寸直接影响——前提是没设 min-width 或 width 等硬性限制。
fr 和 px/% 混用时的行为
混合单位下，fr 只分配「减去非 fr 列后剩下的空间」。比如 grid-template-columns: 200px 1fr 2fr：先切掉左侧 200px，剩下空间再按 1:2 分给后两列。
-
1fr列实际宽度 = (容器宽 − 200px) × 1/3 -
2fr列实际宽度 = (容器宽 − 200px) × 2/3 - 如果容器宽 ≤ 200px，第二、三列会压缩到
min-width: 0（默认）或触发溢出
常见踩坑：内容撑开导致比例失效
默认情况下，grid-column 子项的 min-width: auto 会阻止它收缩到比内容更小，这会让 fr 失效——尤其当文字不换行或图片无约束时。
/* 解决方案：显式允许收缩 */
.grid-item {
min-width: 0;
/* 或针对文本 */
word-break: break-word;
/* 或针对图片 */
max-width: 100%;
height: auto;
}
- 不加
min-width: 0，长单词或未约束图片会让整行变宽，破坏比例 -
fr是基于可用空间计算的，不是基于父容器原始宽度，所以必须确保子项不“抢跑”
响应式中动态调整 fr 配比
用媒体查询改 grid-template-columns 最直接。注意不要只靠 fr 数量变化，要同步考虑内容承载能力。
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr; /* 移动端单列 */
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.grid {
grid-template-columns: 1fr 1fr; /* 平板双列 */
}
}
@media (min-width: 1025px) {
.grid {
grid-template-columns: 1fr 2fr 1fr; /* 桌面端主次分明 */
}
}
真正容易被忽略的是：fr 不解决内容溢出，也不替代 flex-wrap 或 overflow 控制。比例只是布局起点，后续还得看内容是否守规矩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
