diff --git a/frontend/src/assets/style.css b/frontend/src/assets/style.css
index 2fcbcdd..890d657 100644
--- a/frontend/src/assets/style.css
+++ b/frontend/src/assets/style.css
@@ -1051,17 +1051,19 @@ td.actions {
 }
 
 /* Content Grid */
+/* Balanced two-column card flow. Uses CSS multicol (not a hand-assigned
+   grid) so cards distribute by height and the columns stay even no matter
+   how many cards land on either side. display:contents flattens the two
+   .content-column wrappers so their cards flow directly into the columns,
+   which keeps the existing markup unchanged. */
 .content-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 25px;
+  column-count: 2;
+  column-gap: 25px;
   margin-bottom: 25px;
 }
 
 .content-column {
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
+  display: contents;
 }
 
 /* Section Cards */
@@ -1070,6 +1072,10 @@ td.actions {
   border-radius: 0.25rem;
   padding: 1.25rem;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  /* multicol needs per-card spacing (column-gap is horizontal only) and
+     must not split a card across the column break */
+  margin-bottom: 25px;
+  break-inside: avoid;
 }
 
 .section-title {
@@ -1484,7 +1490,7 @@ td.actions {
   }
 
   .content-grid {
-    grid-template-columns: 1fr;
+    column-count: 1;
   }
 
   .audit-footer {