CSS auto-fit + minmax

The One-Line Responsive Grid

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

That's it. No media queries, no JavaScript, no breakpoints. The grid figures out how many columns fit in the available space:

• Wide container: 4 or 5 columns.
• Medium container: 2 or 3 columns.
• Narrow container (mobile): 1 column.

How Each Part Works

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                        │       │         │
                        │       │         └── Max width: 1 fraction of available space
                        │       └─── Function: distribute tracks automatically
                        └─── Keywords: create as many tracks as fit

Breaking it down:

• repeat(...) — repeats the track pattern.
• auto-fit — fills the row with as many tracks as will fit.
• minmax(250px, 1fr) — each track is at least 250px wide, but grows to fill extra space evenly.

auto-fit vs auto-fill — The Critical Difference

These two keywords look identical but behave differently when there are fewer items than available columns:

/* auto-fit — collapses empty columns, items stretch */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/* Result: 3 items → 3 evenly-sized stretched cards */

/* auto-fill — keeps empty columns, items stay sized */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* Result: 3 items → 3 cards + empty space on the right */

Practical Examples

Responsive card grid:

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

Responsive photo gallery:

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}

Responsive dashboard with different min widths:

.dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

Tailwind CSS Version

Tailwind supports arbitrary values with square brackets:

<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
    <div>Card 1</div>
    <div>Card 2</div>
    <div>Card 3</div>
    <div>Card 4</div>
</div>

Or for a more reusable setup, define a custom utility in your CSS:

@utility grid-auto-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

👉 Read our Tailwind Grid Guide and Custom Utilities Guide.