Day 4: Responsive Grids without Media Queries

Daily Objective

Build fluid, responsive card grids that adapt to any screen width automatically without writing media queries!

1. The Magic One-Liner

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

• auto-fit: Fits as many columns as will fit, stretching them to fill remaining room.
• minmax(280px, 1fr): Each column is at least 280px wide and expands up to 1fr.

Daily Hands-on Practice (70%)

1. Build an image gallery with 8 photos using repeat(auto-fit, minmax(220px, 1fr)).
2. Resize the browser from mobile to 4K desktop to see columns adjust smoothly.