---
type: snippet
id: l0pxg6oh1lu9fc1c
title: >
  Responsive Auto-Fill Grid with Tailwind
  Utility
url: >
  https://www.jakubpelak.com/snippets/responsive-auto-fill-grid-with-tailwind-utility
section: snippets
tags:
  - CSS
  - Grid
  - Tailwind
published_at: 2025-08-23
---

# 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.

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

## Usage Example

```html
<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.