Switch dashboard grid to masonry-style columns for adjustable card heights

index.html

@@ -54,9 +54,8 @@
   }
 
   .grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    gap: 1.25rem;
+    columns: 320px;
+    column-gap: 1.25rem;
     max-width: 1400px;
     margin: 0 auto;
   }
@@ -67,6 +66,8 @@
     border-radius: var(--radius);
     overflow: hidden;
     transition: border-color 0.2s, transform 0.2s;
+    break-inside: avoid;
+    margin-bottom: 1.25rem;
   }
   .card:hover { border-color: var(--accent); transform: translateY(-2px); }
 
@@ -180,7 +181,7 @@
 
   @media (max-width: 600px) {
     body { padding: 1rem; }
-    .grid { grid-template-columns: 1fr; }
+    .grid { columns: 1; }
   }
 </style>
 </head>