17370845950

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 控制。比例只是布局起点，后续还得看内容是否守规矩。