Responsive card grid — auto-fit
Grid that automatically shows 1/2/3/4 columns based on screen width. No media queries needed!
style.css
v3.1
style.css — the CSS rules
index.html — the HTML structure (what the CSS targets)
Live preview
updates as you type
🧠 How it works
repeat(auto-fit, minmax(250px, 1fr)) is the magic line. auto-fit — create as many columns as fit in the container. minmax(250px, 1fr) — each column is at least 250px, but can grow to fill space. Result: on a 1000px screen → 4 columns. On a 700px screen → 2 columns. On a 400px screen → 1 column. ALL WITHOUT MEDIA QUERIES. This is the #1 CSS trick for responsive dashboards. The cards show ML metrics — exactly what a data scientist needs. hover: translateY(-3px) + box-shadow — the card 'lifts' on hover, a common micro-interaction.
✏️ Try these changes
-
Change minmax(250px, 1fr) to minmax(150px, 1fr)→ more columns — cards are narrower -
Change minmax(250px, 1fr) to minmax(400px, 1fr)→ fewer columns — cards are wider -
Change gap: 1rem to gap: 2rem→ more space between cards -
Change translateY(-3px) to scale(1.05)→ card grows instead of lifting -
Change the .card h3 color to #58a6ff→ metric titles become blue