falkan/dickloads
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: results grid uses auto-fill minmax so columns scale with available space

Browse Source
This commit is contained in:
Falkan
2026-03-17 20:18:19 -04:00
parent ae6a073b7e
commit e7752ad4ca
1 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/app.css
View File

@@ -238,9 +238,13 @@
} }
/* ── Results grid ──────────────────────────────────────────────────────────── */ /* ── Results grid ──────────────────────────────────────────────────────────── */
/* Responsive column count: 1 col mobile, 2 col tablet, 3 col desktop. */ /* Responsive column count: minimum 1 col mobile, 2 col tablet, 3 col desktop.
/* Cards grow to fill available space (1fr). Column count is a minimum — */ Uses auto-fill + minmax so extra columns appear automatically when there's
/* more columns are fine if content allows. */ room — floor(availableWidth / minCardWidth) columns at any given width.
minmax values chosen so the minimum column count is enforced at each breakpoint:
<480px → 1 col min (cards can be full-width)
≥480px → 2 col min (minmax(220px) → ⌊480/220⌋ = 2)
≥900px → 3 col min (minmax(280px) → ⌊900/280⌋ = 3) */
.results-grid { .results-grid {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
@@ -250,13 +254,13 @@
@media (min-width: 480px) { @media (min-width: 480px) {
.results-grid { .results-grid {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
} }
} }
@media (min-width: 900px) { @media (min-width: 900px) {
.results-grid { .results-grid {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
} }
} }