Responsive Card Grid Page
Card grid pages display collections - blog posts, products, courses, team members. Build a complete page with a filter bar, responsive card grid, and cards with images, tags, and consistent footer alignment.
Card Grid Patterns
- Auto-fit grid - repeat(auto-fit, minmax(300px, 1fr)) for responsive columns without media queries
- Card structure - Image top, content middle (flex: 1), footer bottom using flex column
- Equal heights - Grid stretch ensures all cards match the tallest. Flex column keeps footer at bottom
- Image consistency - aspect-ratio: 16/9 with object-fit: cover for uniform image heights
- Tags/badges - Inline-flex badges with small font, rounded corners, and category colors
- Filter bar - Flex row of filter buttons above the grid with active state styling
Card Grid Code
/* Full card grid page */
.page-container {
max-width: 1200px;
margin: 0 auto;
padding: clamp(1rem, 3vw, 3rem);
}
/* Filter bar */
.filter-bar {
display: flex;
gap: 8px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.filter-btn {
padding: 8px 16px;
border: 2px solid #e0e0e0;
border-radius: 20px;
background: white;
cursor: pointer;
font-size: 0.9em;
transition: all 0.2s;
}
.filter-btn.active,
.filter-btn:hover {
border-color: #667eea;
background: #667eea;
color: white;
}
/* Card grid */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}
/* Individual card */
.card {
display: flex;
flex-direction: column;
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}
.card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.card-body { flex: 1; padding: 20px; }
.card-footer { padding: 12px 20px; border-top: 1px solid #f0f0f0; }
.tag { display: inline-block; padding: 4px 10px; background: #f0f4ff; color: #667eea; border-radius: 12px; font-size: 0.8em; font-weight: 600; }Tip
The flex: 1 on card-body is the key to aligned card footers. It makes the body expand to fill all available space, pushing the footer to the bottom - regardless of how much content each card has. This creates perfectly aligned footer rows across cards.
Grid handles two-dimensional layouts - rows AND columns simultaneously
Common Mistake
Using fixed heights on cards to align footers. This clips content on some cards. The flex column + flex: 1 pattern is the correct solution - it aligns footers while allowing cards to grow to accommodate their content.
Practice Task
Build a blog card grid: (1) Auto-fit grid with 300px min-width cards, (2) Each card: image (aspect-ratio: 16/9), title, excerpt (flex: 1 on body), and footer with date + read-more link, (3) Tags as inline badges, (4) Filter bar with active state toggle.
Quick Quiz
Key Takeaways
- Card grid pages display collections - blog posts, products, courses, team members.
- Auto-fit grid - repeat(auto-fit, minmax(300px, 1fr)) for responsive columns without media queries
- Card structure - Image top, content middle (flex: 1), footer bottom using flex column
- Equal heights - Grid stretch ensures all cards match the tallest. Flex column keeps footer at bottom