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:

UtilityBehaviorUse Case
grid-cols-auto-fill-*Creates empty columns to fill spaceFixed-width cards, consistent spacing
grid-cols-auto-fit-*Stretches items to fill spaceFlexible 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

ClassMin WidthGood For
grid-cols-auto-fill-328rem (128px)Small cards, thumbnails
grid-cols-auto-fill-4812rem (192px)Medium cards, product tiles
grid-cols-auto-fill-6416rem (256px)Large cards, feature sections
grid-cols-auto-fill-8020rem (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

PatternMin WidthRem Value
grid-cols-auto-fill-{n}n × 0.25remDynamic
grid-cols-auto-fit-{n}n × 0.25remDynamic

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