🃏 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.
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.
.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.
/* 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.
/* 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.
.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 */ }