CSS Grid: 2D Layouts & Auto-Fit

« Flexbox Layouts & Alignment« Previous Color Palettes, Hex, HSL & WCAG Contrast »Next »

Create two-dimensional layouts using CSS Grid, fraction units (fr), and responsive auto-fit columns without media queries.

The Magic of repeat(auto-fit, minmax(280px, 1fr))

One of the most powerful responsive snippets in modern CSS creates a fully responsive card grid without writing a single media query:

Zero-Media-Query Responsive Grid

Try It Yourself »

.responsive-grid {
  display: grid;
  /* Automatically wraps items when they drop below 280px */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

What does the CSS "1fr" fraction unit represent in a grid container?

« Previous: Flexbox Layouts & Alignment Next: Color Palettes, Hex, HSL & WCAG Contrast »