tailwindcss grid auto fill auto fit

Jul-16, 2025 · 1min

change language

创建自定义 Tailwind CSS 实用程序,用于自动填充和自动适应网格布局,使用新的 @utility 指令进行更好的响应式设计

一个自定义工具,将 grid-cols-fill-12 设置为 grid-template-columns: repeat(auto-fill, minmax(3rem, 12))

@utility grid-cols-fill-* {
  grid-template-columns: repeat(
    auto-fill,
    minmax(--spacing(--value(number)), 1fr)
  );
}

@utility grid-cols-fit-* {
  grid-template-columns: repeat(
    auto-fit,
    minmax(--spacing(--value(number)), 1fr)
  );
}

vscode-grid-auto-fill-tip