CSS中的网格布局（Grid Layout）fr单位详解

描述
fr单位（fractional unit）是CSS Grid布局中专用的长度单位，表示网格容器中的可用空间比例。它通过分配剩余空间来创建灵活的网格轨道尺寸，能够实现真正自适应的布局效果。

基本概念

1. fr单位只适用于grid-template-columns和grid-template-rows属性
2. 它基于网格容器的可用空间进行计算（总空间减去固定尺寸轨道后的剩余空间）
3. 多个fr值会按比例分配剩余空间

基本计算原理
假设网格容器宽度为1200px，定义三列：

.grid-container {
  grid-template-columns: 100px 1fr 2fr;
}

计算过程：

1. 先分配固定宽度：100px
2. 剩余空间：1200px - 100px = 1100px
3. 总份数：1 + 2 = 3份
4. 第一fr列：1100px × (1/3) ≈ 366.67px
5. 第二fr列：1100px × (2/3) ≈ 733.33px

与其他单位的配合使用
fr单位可以与任何长度单位混合使用：

.grid-container {
  grid-template-columns: 200px 1fr min-content 2fr;
}

计算顺序：

1. 先分配所有固定尺寸（200px、min-content）
2. 剩余空间按fr比例分配

minmax()函数与fr单位的结合
minmax()可以限制fr单位的最小和最大值：

.grid-container {
  grid-template-columns: 1fr minmax(200px, 300px) 2fr;
}

这种组合既保持了灵活性，又确保了轨道的尺寸范围。

多fr值的高级分配
当存在多个fr轨道时，浏览器会智能处理：

.grid-container {
  grid-template-columns: 1fr 500px 1fr 1fr;
}

如果容器宽度足够，固定轨道500px先分配，剩余空间三等分。如果容器过窄，fr轨道会按比例收缩，但不会小于min-content。

fr与auto的区别

• auto：基于内容尺寸分配空间
• fr：严格按比例分配剩余空间

/* auto列根据内容宽度，fr列平分剩余空间 */
grid-template-columns: auto 1fr 1fr;

/* 三个fr列按比例分配全部空间 */
grid-template-columns: 1fr 2fr 1fr;

实际应用技巧

1. 等分布局：grid-template-columns: repeat(3, 1fr)
2. 主侧栏布局：grid-template-columns: 250px 1fr
3. 响应式网格：结合minmax实现自适应

.grid-container {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

注意事项

1. fr值不能为负数
2. 当所有轨道都是fr单位时，它们会按比例分配整个容器空间
3. 如果剩余空间为负，fr轨道的实际尺寸会按比例收缩，但不会小于min-content
4. fr单位不能用于gap属性

通过理解fr单位的工作原理，可以创建出真正响应式的网格布局，无需媒体查询就能适应不同屏幕尺寸。