Responsive Grid Layout — Build Grids That Work on Any Screen

A responsive CSS grid adjusts its column count and item sizing based on the available viewport width. The best responsive grids require no media queries — they reflow automatically using CSS Grid’s intrinsic sizing capabilities.

Use the CSS Grid Generator to build responsive grid templates visually.

The auto-fill + minmax pattern

The most powerful responsive grid technique:

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

What this does:

• repeat(auto-fill, ...) — create as many columns as fit in the available width
• minmax(280px, 1fr) — each column is at least 280px wide, grows to fill available space

Result:

• At 320px viewport: 1 column (320px - padding = ~280px)
• At 620px viewport: 2 columns (620px / 280px ≈ 2)
• At 900px viewport: 3 columns (900px / 280px ≈ 3)
• At 1200px viewport: 4 columns (1200px / 280px ≈ 4)

No breakpoints, no media queries. The grid responds automatically.

auto-fill vs auto-fit

/* auto-fill: preserves empty tracks */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

/* auto-fit: collapses empty tracks (items stretch to fill) */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

auto-fill: If you have 3 items and 5 columns fit, you get 5 columns (2 empty). Items don’t stretch beyond their max width.

auto-fit: If you have 3 items and 5 columns fit, the 2 empty columns collapse and the 3 items stretch to fill the row.

Which to use: auto-fill for card grids (cards shouldn’t be abnormally wide). auto-fit for navigation items that should distribute evenly.

Responsive grid with media queries

When you need explicit breakpoints (different column structures, not just counts):

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;  /* Mobile: 1 column */
}

@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);  /* Tablet: 2 columns */
    gap: 24px;
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);  /* Desktop: 3 columns */
  }
}

@media (min-width: 1280px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);  /* Wide: 4 columns */
  }
}

This approach gives you complete control over column count at each breakpoint.

Responsive layout patterns

Card grid (most common)

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

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

Feature grid (mixed sizes)

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

/* Feature that spans 2 columns on wide screens: */
.feature-featured {
  grid-column: span 2;
}

@media (max-width: 600px) {
  .feature-featured {
    grid-column: span 1;  /* Single column on mobile */
  }
}

Holy Grail layout (responsive)

.page {
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto 1fr auto;
}

.content-area {
  display: grid;
  grid-template-columns: 1fr;  /* Mobile: stacked */
}

@media (min-width: 768px) {
  .content-area {
    grid-template-columns: 240px 1fr;  /* Sidebar + main */
  }
}

@media (min-width: 1200px) {
  .content-area {
    grid-template-columns: 240px 1fr 200px;  /* Both sidebars */
  }
}

Image gallery (masonry-style)

/* Standard grid (equal row heights): */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

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

/* CSS Masonry (experimental — limited browser support): */
.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;  /* Chrome flag or Firefox experimental */
}

For masonry grids with broad browser support, use JavaScript libraries or CSS columns as a fallback.

Preventing grid overflow

/* Prevent items from breaking out of the grid: */
.grid > * {
  min-width: 0;  /* Allows items to shrink below their content width */
  overflow: hidden;  /* Or overflow: auto for scrollable items */
}

/* Long text can cause overflow in grid items: */
.grid-item {
  overflow-wrap: break-word;  /* Break long words */
  word-break: break-word;
}

Grid with aspect-ratio

Maintaining consistent card heights:

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

.thumbnail {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

The aspect-ratio property maintains the 16:9 ratio regardless of the column width — cards resize but maintain their proportions.

Responsive grid performance

CSS Grid is GPU-accelerated and highly performant. For very large grids (hundreds of items), consider:

Virtual scrolling: Only render items in the viewport. Libraries: react-virtual, react-window.

Container queries: As of Chrome 105+, you can use container queries instead of viewport media queries for component-level responsiveness:

@container (min-width: 480px) {
  .card {
    display: grid;
    grid-template-columns: 120px 1fr;
  }
}

This makes the card layout respond to its container’s width, not the viewport — allowing components to be truly reusable.

Related tools

• CSS Grid Generator — build grid templates visually
• CSS Grid Layout Guide — complete grid reference
• CSS Grid Template — grid-template-columns deep dive