📚 Lesson 7: Responsive Grids

The Holy Grail of Responsive Design

What if you could create a grid that automatically adjusts the number of columns based on available space, without writing a single media query? That's the power of responsive Grid patterns.

The Magic Formula

This one line of code creates a fully responsive grid:

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

This creates as many columns as will fit, with each column at least 250px wide. On a wide screen, you get multiple columns. On mobile, you get a single column. All automatic!

Understanding minmax()

The minmax() function sets a minimum and maximum size for a track (column or row).

Syntax

minmax(min-value, max-value)

Examples

/* Column is at least 200px, at most 1fr (fills available space) */
grid-template-columns: minmax(200px, 1fr);

/* Column is at least 300px, at most 500px */
grid-template-columns: minmax(300px, 500px);

/* Three columns, each 250-400px */
grid-template-columns: repeat(3, minmax(250px, 400px));

auto-fit vs auto-fill

Both create responsive columns, but they behave differently with extra space:

auto-fit

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

Collapses empty columns and stretches existing items to fill the space. If you have 3 items and room for 5 columns, the 3 items expand to fill all available space.

auto-fill

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

Keeps empty columns even if there are no items to fill them. If you have 3 items and room for 5 columns, the 3 items stay at minimum size and 2 columns remain empty.

Common Responsive Patterns

Pattern 1: Card Grid

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

Perfect for: Product cards, blog posts, team members, portfolios

Pattern 2: Image Gallery

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

.gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

Perfect for: Photo galleries, thumbnails, image grids

Pattern 3: Sidebar Layout (with fallback)

.layout {
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(300px, 1fr);
  gap: 32px;
}

/* Stack on mobile */
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

Perfect for: Blog layouts, documentation, app interfaces

Advanced: Responsive Rows

You can also control row heights responsively:

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

This ensures rows are at least 200px tall but can grow if content needs more space.

Combining with Media Queries

While auto-fit handles most responsive needs, you can still use media queries for fine-tuning:

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

/* Smaller gap on mobile */
@media (max-width: 768px) {
  .grid {
    gap: 16px;
  }
}

/* Larger minimum size on wide screens */
@media (min-width: 1400px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  }
}

Real-World Example

Here's a complete responsive card grid:

/* HTML */
<div class="product-grid">
  <div class="product-card">...</div>
  <div class="product-card">...</div>
  <div class="product-card">...</div>
</div>

/* CSS */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  padding: 40px;
}

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

Behavior:

• Desktop (1920px): ~6 columns
• Laptop (1440px): ~4-5 columns
• Tablet (768px): ~2 columns
• Mobile (375px): 1 column

All automatic - no media queries needed!

Common Mistakes to Avoid

Mistake 1: Minimum Too Small

/* Too small - cards look cramped on mobile */
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

Mistake 2: Minimum Too Large

/* Too large - forces horizontal scroll on mobile */
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));

Mistake 3: Using Fixed Maximum

/* Fixed max prevents items from filling space */
grid-template-columns: repeat(auto-fit, minmax(250px, 300px));

Browser Support

auto-fit, auto-fill, and minmax() work in all modern browsers. They're safe to use for 96%+ of users.