Responsive card grid

A responsive grid of cards that reflows cleanly from one column to four. The challenge was getting row heights to feel natural without a JavaScript masonry library.

The Challenge

Build a responsive card grid where cards have variable content lengths. At wide viewports they sit in a four-column grid. On mobile, a single column. Cards should never feel cramped or artificially stretched.

Requirements:

• Responsive layout from 1 to 4 columns
• Cards stretch to fill row height consistently
• No JS for layout

What I Learned

grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) does most of the work — it calculates column count from available space automatically.

The trickier part: making cards within a row align at their bottom edges without stretching text. align-items: start on the grid container lets each card be only as tall as it needs to be.

Code Sketch

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  align-items: start;
}

<div class="grid">
  <div class="card">Short content</div>
  <div class="card">Much longer content that wraps to multiple lines</div>
  <div class="card">Medium length content here</div>
</div>

Why It Matters

auto-fit + minmax is one of the most practical CSS grid patterns. Once it clicks, you’ll use it everywhere.