CSS Grid responsive

Grid auto-fit and auto-fill

auto-fit collapses empty tracks; auto-fill keeps them. Both allow columns to wrap automatically based on available space — no breakpoints required.

Auto-responsive card grid

A grid that automatically arranges cards into rows, adapting to any screen size without media queries.

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

.card {
  background: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Difference: auto-fit vs auto-fill

Subtle but important for alignment.

/* auto-fit: collapses empty columns, items stretch to fill */
.grid-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* auto-fill: keeps empty columns, items don't stretch */
.grid-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

Quick check: What does minmax(280px, 1fr) do in CSS Grid?

• Ensures columns are at least 280px, grow to fill space
• Makes columns exactly 280px
• Limits columns to 280px maximum