CSS中的网格布局（Grid Layout）自动填充（auto-fill）与自动适应（auto-fit）详解

描述
auto-fill和auto-fit是CSS网格布局中用于定义轨道大小的两个关键字，主要用在repeat()函数中创建自适应网格轨道。它们都能让网格容器根据可用空间自动调整轨道数量，但在处理多余空间时有着关键区别。

详细讲解

1. 基本语法与使用场景

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* 或 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

• 两者都用于创建响应式网格，根据容器宽度自动调整列数
• 必须与minmax()函数结合使用，定义轨道的最小和最大尺寸
• 适用于需要自动换行或响应式排列的网格布局

2. auto-fill的工作机制
auto-fill会尽可能多地创建轨道，即使这些轨道没有内容填充：

.container {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  width: 500px;
}

计算过程：

• 轨道最小宽度100px，最大1fr
• 容器宽度500px，可容纳5个100px的轨道（500÷100=5）
• 即使只有3个网格项，也会创建5条轨道线，多余轨道保持空白

3. auto-fit的工作机制
auto-fit会拉伸现有轨道填满可用空间：

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

计算过程：

• 同样宽度500px，如果只有3个网格项
• 先计算最小需要300px（3×100px），剩余200px空间
• 将200px空间按比例分配给3个轨道（每个轨道约166.67px）

4. 视觉差异对比
假设容器宽度400px，minmax(120px, 1fr)，有2个网格项：

• auto-fill：创建3个轨道（400÷120≈3.33→取整为3），第3个轨道为空
• auto-fit：创建2个轨道，每个轨道宽度200px（填满容器）

5. 实际应用示例

.auto-fill-example {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  /* 保持固定轨道数量，适合需要保持网格对齐的场景 */
}

.auto-fit-example {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  /* 内容自适应扩展，适合卡片布局或图库 */
}

6. 响应式设计技巧
结合媒体查询优化体验：

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

/* 小屏幕时固定列数 */
@media (max-width: 480px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

7. 注意事项

• 轨道最小值建议使用固定单位（px），避免内容溢出
• 最大值的1fr确保轨道能均匀分配剩余空间
• 结合gap属性设置间距，避免轨道拥挤
• 测试极端情况（内容过多/过少）下的显示效果

理解auto-fill和auto-fit的区别有助于创建更灵活的网格布局，根据内容量自动优化空间利用。