Grid

Responsive grid utilities with auto-fill and auto-fit for flexible layouts

Grid Utilities

@duskmoon-dev/core extends Tailwind CSS v4 with responsive grid utilities that automatically adapt to container width.

Auto-Fill vs Auto-Fit

Both utilities create responsive grids without media queries, but they behave differently when there’s extra space:

Utility Behavior Use Case
grid-cols-auto-fill-* Creates empty columns to fill space Fixed-width cards, consistent spacing
grid-cols-auto-fit-* Stretches items to fill space Flexible cards, full-width coverage

Basic Usage

The number after the utility name represents the minimum column width in Tailwind’s spacing scale (× 0.25rem).

Auto-Fill Grid

Item 1
Item 2
Item 3
Item 4

Auto-Fit Grid

Item 1
Item 2
Item 3
Item 4

How It Works

The utilities use CSS repeat() with minmax() to create flexible grids:

/* grid-cols-auto-fill-48 generates: */
grid-template-columns: repeat(
  auto-fill,
  minmax(min(12rem, 100%), 1fr)
);

/* grid-cols-auto-fit-48 generates: */
grid-template-columns: repeat(
  auto-fit,
  minmax(min(12rem, 100%), 1fr)
);

The min(value, 100%) ensures items never overflow their container on small screens.

Common Sizes

Class Min Width Good For
grid-cols-auto-fill-32 8rem (128px) Small cards, thumbnails
grid-cols-auto-fill-48 12rem (192px) Medium cards, product tiles
grid-cols-auto-fill-64 16rem (256px) Large cards, feature sections
grid-cols-auto-fill-80 20rem (320px) Wide cards, dashboards

Practical Examples

Product Grid

E-commerce Product Grid

Product Name

$29.99

Product Name

$49.99

Product Name

$19.99

Responsive Photo Gallery

Dashboard Stats

Stats Dashboard

Total Users

12,543

Revenue

$84,232

Pending

23

Active Now

573

Difference Visualization

The key difference between auto-fill and auto-fit becomes apparent with few items:

Auto-Fill with 2 Items

Item 1
Item 2

Auto-Fit with 2 Items

Item 1
Item 2

Combining with Gap

Use Tailwind’s gap utilities for spacing:

Grid with Different Gaps

1
2
3
4
1
2
3
4

Best Practices

Choose the Right Utility

  • Use auto-fill when you want consistent card sizes and don’t mind empty space
  • Use auto-fit when you want items to grow and fill available space

Size Selection

Choose minimum widths based on content:

<!-- For text-heavy cards, use larger minimums -->
<div class="grid grid-cols-auto-fill-64 gap-4">...</div>

<!-- For thumbnails or icons, use smaller minimums -->
<div class="grid grid-cols-auto-fill-32 gap-2">...</div>

Combine with Max-Width

For centered layouts, combine with container utilities:

Centered Grid Layout

Centered Item 1
Centered Item 2
Centered Item 3

API Reference

Available Classes

Pattern Min Width Rem Value
grid-cols-auto-fill-{n} n × 0.25rem Dynamic
grid-cols-auto-fit-{n} n × 0.25rem Dynamic

Where {n} is any integer. Common values:

  • 16 = 4rem (64px)
  • 32 = 8rem (128px)
  • 48 = 12rem (192px)
  • 64 = 16rem (256px)
  • 80 = 20rem (320px)
  • 96 = 24rem (384px)

CSS Output

.grid-cols-auto-fill-48 {
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(calc(48 * 0.25rem), 100%), 1fr)
  );
}

.grid-cols-auto-fit-48 {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(calc(48 * 0.25rem), 100%), 1fr)
  );
}

Browser Support

These utilities use standard CSS Grid features supported in all modern browsers:

  • Chrome 57+
  • Firefox 52+
  • Safari 10.1+
  • Edge 16+
  • Card - Card component for grid items
  • Divider - Visual separators
  • Container - Tailwind’s container utility