Responsive Card Grid
The most-used CSS Grid pattern: a responsive grid of cards that automatically adjusts the number of columns based on available width — with zero media queries. Based on the RAM technique: Repeat, Auto-fill, Minmax. sdfsdfs
1. Product Card Grid
A realistic e-commerce product grid. Cards are at least 180px wide and grow to fill available space. On wide screens: 4+ columns. On narrow: 1 column. No media queries.
CSS
.products {
display: grid;
grid-template-columns:
repeat(auto-fill, minmax(200px, 1fr));
gap: 1.5rem;
}
.card {
background: white;
border-radius: 12px;
border: 1px solid #e2e8f0;
overflow: hidden;
/* No explicit width needed! */
}2. auto-fill vs auto-fit with Few Items
With fewer items than columns fit, auto-fill preserves empty columns (items stay at min-width), while auto-fit collapses empty tracks so items stretch to fill the row.
CSS
/* auto-fill: keeps empty track placeholders */
.fill {
grid-template-columns:
repeat(auto-fill, minmax(200px, 1fr));
}
/* auto-fit: collapses empty tracks */
.fit {
grid-template-columns:
repeat(auto-fit, minmax(200px, 1fr));
}3. Equal Card Heights with Subgrid
The subgrid problem: cards in a row should have their internal elements (image, title, price, button) aligned across cards — even if card content varies in height.
CSS
/* Parent: 4 rows for the 4 internal sections */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto auto auto;
}
.card {
display: grid;
grid-row: span 4; /* span all 4 row tracks */
grid-template-rows: subgrid; /* use parent rows! */
}
/* Result: image/title/desc/price align across all cards */4. Featured Card Variant
Make selected cards larger by giving them a column or row span. The rest of the grid flows naturally around them.
CSS
.grid {
display: grid;
grid-template-columns:
repeat(auto-fill, minmax(160px, 1fr));
grid-auto-rows: 1fr; /* equal row heights */
gap: 1rem;
}
.card--featured {
grid-column: span 2; /* 2× wider */
grid-row: span 2; /* 2× taller */
}