diff --git a/src/lib/components/home/NumberCard.svelte b/src/lib/components/home/NumberCard.svelte index 2fc1c66..88d0288 100644 --- a/src/lib/components/home/NumberCard.svelte +++ b/src/lib/components/home/NumberCard.svelte @@ -44,6 +44,7 @@ border-radius: var(--radius-card); box-shadow: var(--shadow-soft); aspect-ratio: 3 / 4; + width: 100%; min-width: 0; padding: 12px; display: grid; diff --git a/src/lib/screens/HomeScreen.svelte b/src/lib/screens/HomeScreen.svelte index f5c9f5f..d2eb716 100644 --- a/src/lib/screens/HomeScreen.svelte +++ b/src/lib/screens/HomeScreen.svelte @@ -37,7 +37,7 @@
{#each TARGETS as target (target)} - +
{/each}
@@ -72,12 +72,14 @@ } .cards-grid { /* Karten haben aspect-ratio 3/4. Bei 7 Karten ergeben sich je nach Spaltenzahl - 2/3/4 Reihen — Grid-Breite wird so begrenzt, dass die Reihen in die verfügbare - Höhe passen. Formel: max-width = C·3·(H - (R-1)·g) / (4R) + (C-1)·g. */ + 2/3/4 Reihen — Breite wird so begrenzt, dass die Reihen in die verfügbare + Höhe passen. Formel: max-width = C·3·(H - (R-1)·g) / (4R) + (C-1)·g. + Flexbox statt Grid, damit eine nicht volle letzte Reihe zentriert wird. */ --gap: 14px; --avail-h: calc(100dvh - 130px); - display: grid; - grid-template-columns: repeat(4, 1fr); + --cols: 4; + display: flex; + flex-wrap: wrap; gap: var(--gap); align-content: center; justify-content: center; @@ -87,16 +89,20 @@ margin-inline: auto; padding-bottom: 10px; } + .cell { + flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); + min-width: 0; + } @media (max-width: 640px) { .cards-grid { - grid-template-columns: repeat(3, 1fr); + --cols: 3; /* 3 Spalten, 3 Reihen */ max-width: calc(var(--avail-h) * 0.75 + var(--gap) * 0.5); } } @media (max-width: 380px) { .cards-grid { - grid-template-columns: repeat(2, 1fr); + --cols: 2; /* 2 Spalten, 4 Reihen */ max-width: calc(var(--avail-h) * 0.375 - var(--gap) * 0.125); }