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 ──────────────────────────────────────────────────────────── */
/* Responsive column count: 1 col mobile, 2 col tablet, 3 col desktop. */
/* Cards grow to fill available space (1fr). Column count is a minimum — */
/* more columns are fine if content allows. */
/* Responsive column count: minimum 1 col mobile, 2 col tablet, 3 col desktop.
Uses auto-fill + minmax so extra columns appear automatically when there's
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 {
display: grid;
grid-template-columns: 1fr;
@@ -250,13 +254,13 @@
@media (min-width: 480px) {
.results-grid {
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
}
@media (min-width: 900px) {
.results-grid {
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
}