CSS Grid Alignment with minmax

The Problem

You have a card grid. Cards should be:

• Minimum 280px wide (readable on mobile)
• Maximum 380px wide (not too stretched on desktop)
• Left-aligned with other page elements

The Wrong Way

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

Problem: 1fr means cards stretch to fill all available space. Three cards on a wide screen become huge.

The Right Way

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 380px));
  gap: 1.5rem;
  justify-content: start;
  margin: 0 1rem;
}

What Each Part Does

minmax(280px, 380px): Cards are at least 280px, at most 380px. No stretching beyond 380px.

justify-content: start: Left-aligns the grid items. Without this, cards center in the available space.

margin: 0 1rem: Matches the margin of hero sections and other full-width elements above/below.

Alignment Gotcha

If your hero and filter bar have padding/margin, your grid needs matching margin. Otherwise cards won’t align vertically with content above.

/* Hero and filter bar */
.hero { padding: 0 1rem; }
.filter-bar { margin: 0 1rem; }

/* Grid must match */
.card-grid { margin: 0 1rem; }

When to Use `1fr` Instead

Use minmax(280px, 1fr) when you want cards to grow and fill space:

.full-width-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

Cards fill the entire container width. Good for dashboards, bad for blog card grids.

References

• CSS Grid minmax()