笔记

• 2026-01-15

  A guide to Scroll-driven Animations with just CSS | WebKit

• 2026-01-14

  CSS Grid - auto-fill vs auto-fit

  在新标签页打开 demo

  共同点：都会根据可用空间自动创建尽可能多的轨道

  核心区别：

  auto-fill - 始终创建轨道

  • 行为：尽可能多地创建轨道，即使没有足够的网格项来填充
  • 空轨道：保持为空，占据空间
  • 适用场景：不确定网格项数量，希望保持固定网格结构

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

  auto-fit - 折叠空轨道

  • 行为：创建轨道后，如果网格项数量不足，空轨道会被折叠
  • 空轨道：宽度变为 0，空间重新分配给已有项目
  • 适用场景：希望内容始终拉伸填满可用空间

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