diff --git a/client/src/styles.css b/client/src/styles.css
index f1f1d9c..ddf5932 100644
--- a/client/src/styles.css
+++ b/client/src/styles.css
@@ -98,27 +98,18 @@ button.danger { background: #5a2a2a; border-color: #7a3a3a; color: #fff; }
 .topbar .bar-name { font-size: 26px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .topbar .change { font-size: 17px; padding: 10px 14px; }
 
-/* Drink grid: 3 equal columns. Rows no longer assume a fixed count (the old
-   "exactly 5 rows fill the area" formula squeezed every row into 1/5 of the
-   height regardless of how many rows actually existed — 4 rows of drinks
-   looked cramped, with a wasted empty row's worth of space below them).
-   `minmax(min-content, 1fr)`: the floor is each row's own natural content
-   height (name + price + Pfand at whatever font-size is active — this
-   already tracks the smaller mobile font sizes below with no separate
-   number needed) rather than a guessed pixel value, and 1fr means rows are
-   equal height and stretch to fill any leftover space when there's room —
-   but never shrink below that content-derived floor. When there are enough
-   rows that even their natural height doesn't fit the visible area, the
-   grid holds every row at that floor and the whole thing scrolls
-   (overflow-y: auto) instead of cramming rows smaller — "otherwise go for
-   what fits". */
+/* Drink grid: 3 equal columns. Row height is DERIVED so exactly five equal
+   rows fill the visible grid area (the area's height minus the four inter-row
+   gaps, split five ways) — no fixed tile pixel size, so tiles stay the same
+   size whatever the count, ~5 rows show on the portrait iPad mini, and the
+   rest scroll while the cart (entry overview + sum) stays pinned below. */
 .grid {
   --gap: 8px;
   flex: 1 1 0;
   min-height: 0;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: minmax(min-content, 1fr);
+  grid-auto-rows: calc((100% - 4 * var(--gap)) / 5);
   align-content: start;
   gap: var(--gap);
   padding: var(--gap);
@@ -154,9 +145,9 @@ button.danger { background: #5a2a2a; border-color: #7a3a3a; color: #fff; }
   font-size: 22px;
   overflow: hidden;
 }
-.drink .name { font-weight: 800; line-height: 1.25; max-width: 100%; word-break: break-word; overflow-wrap: break-word; }
-.drink .price { font-size: 22px; font-weight: 700; margin-top: 8px; }
-.drink .pfand { font-size: 15px; font-weight: 600; color: var(--pfand); margin-top: 4px; }
+.drink .name { font-weight: 800; line-height: 1.15; max-width: 100%; word-break: break-word; overflow-wrap: break-word; }
+.drink .price { font-size: 22px; font-weight: 700; margin-top: 6px; }
+.drink .pfand { font-size: 15px; font-weight: 600; color: var(--pfand); margin-top: 2px; }
 
 .drink.pfand-return {
   background: #5a2a2a;