diff --git a/client/src/styles.css b/client/src/styles.css
index c3fc15a..7fa8485 100644
--- a/client/src/styles.css
+++ b/client/src/styles.css
@@ -98,17 +98,23 @@ button.danger { background: #5a2a2a; border-color: #7a3a3a; color: #fff; }
 .topbar .bar-name { font-size: 26px; font-weight: 800; }
 .topbar .change { font-size: 17px; padding: 10px 14px; }
 
-/* Drink grid fills available space with no scrolling — tiles auto-size to fit.
-   3 columns on portrait iPad (~768px); rows divide the remaining height equally. */
+/* 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: 1fr;
-  gap: 8px;
-  padding: 8px;
-  overflow: hidden;
+  grid-auto-rows: calc((100% - 4 * var(--gap)) / 5);
+  align-content: start;
+  gap: var(--gap);
+  padding: var(--gap);
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 @media (max-width: 480px) {