Responsive Dashboard Cards
Dashboard cards are often ideal candidates for auto-fitting Grid layouts. Instead of defining separate desktop, tablet, and mobile card widths, intrinsic sizing can allow the browser to determine the number of columns.
Responsive Dashboard Card
Auto-Fitting Cards
.stats {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(min(100%, 220px), 1fr)
);
gap: 1rem;
}
.stat-card {
padding: 1.25rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
}💡 The cards automatically adapt to available space while maintaining a practical minimum width.
Key Takeaways
- Intrinsic responsive grids can reduce breakpoint complexity.
- Use
min()insideminmax()when narrow containers are possible.
Knowledge Check
What does `auto-fit` help the Grid do?