tailwindcss grid auto fill auto fit
Jul-16, 2025 · 1min
change languageCreate custom Tailwind CSS utilities for auto-fill and auto-fit grid layouts using the new @utility directive for better responsive design
a custom utility to set the grid-cols-fill-12 to 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)
);
}