Responsive Auto-Fill Grid with Tailwind Utility

This custom Tailwind utility creates a responsive grid that automatically fills the available space with as many columns as possible. The minimum column width is controlled by the number you pass after grid-cols-fill-. Perfect for card layouts, galleries, or product grids without hardcoding breakpoints.

@utility grid-cols-fill-* {
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(calc(var(--spacing) * --value(integer)), 100%), 1fr)
  );
}

Usage Example

<div class="grid grid-cols-fill-48 gap-4">
  <div class="bg-gray-200 p-4">Item 1</div>
  <div class="bg-gray-200 p-4">Item 2</div>
  <div class="bg-gray-200 p-4">Item 3</div>
  <div class="bg-gray-200 p-4">Item 4</div>
</div>

This will create as many columns as fit in the container, each at least calc(var(--spacing) * 48) wide, expanding to fill remaining space.