Grid布局之fr单位参数深入理解

fr（fraction）是 Grid 布局中的弹性单位，表示剩余空间的一份。

fr 单位概念

fr 代表"份数"，按比例分配容器的可用空间。

基本用法

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 三等分 */
}

fr 与固定单位混用

当容器同时包含固定尺寸和弹性尺寸时，fr 分配剩余空间。

CSS

.container {
  display: grid;
  /* 侧边栏固定200px，主内容占满剩余空间 */
  grid-template-columns: 200px 1fr;
}

.container {
  display: grid;
  /* 左侧固定，右侧按比例分配 */
  grid-template-columns: 200px 2fr 1fr;
}

fr 与百分比的区别

单位	计算基准	特点
`fr`	剩余空间	先扣除固定尺寸，再按比例分配
`%`	容器总宽度	可能导致溢出，不考虑固定尺寸

CSS

/* fr：先扣除固定宽度，再分配剩余 */
grid-template-columns: 200px 1fr 1fr;

/* %：基于总宽度计算，可能溢出 */
grid-template-columns: 200px 50% 50%;  /* 溢出！ */

常见布局模式

经典三栏布局

CSS

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 250px;  /* 左侧固定，中间弹性，右侧固定 */
  min-height: 100vh;
}

等分多列

CSS

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* 四等分 */
  gap: 20px;
}

不等分比例

CSS

.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;  /* 50% 25% 25% */
}

.container {
  display: grid;
  grid-template-columns: 3fr 2fr;  /* 60% 40% */
}

fr 与 minmax 结合

CSS

.container {
  display: grid;
  /* 最小150px，最大按比例分配 */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

实际案例

响应式卡片

CSS

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

圣杯布局

CSS

.holy-grail {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 200px 1fr 200px;
  min-height: 100vh;
}

要点总结

fr 按比例分配剩余空间，先扣除固定尺寸
与百分比不同，fr 不会导致溢出
常用模式：1fr 1fr（二等分）、repeat(n, 1fr)（n等分）
配合 minmax() 实现响应式布局