myron/web-dashboard
1
0
Fork 0
mirror of https://github.com/myronblair/web-dashboard synced 2026-07-28 12:12:29 -05:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Myron Blair
2026-07-21 18:45:20 -05:00
parent d6a1d93b4b
commit 72e1e43a24
1 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+5 -4
View File
@@ -54,9 +54,8 @@
} }
.grid { .grid {
display: grid; columns: 320px;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); column-gap: 1.25rem;
gap: 1.25rem;
max-width: 1400px; max-width: 1400px;
margin: 0 auto; margin: 0 auto;
} }
@@ -67,6 +66,8 @@
border-radius: var(--radius); border-radius: var(--radius);
overflow: hidden; overflow: hidden;
transition: border-color 0.2s, transform 0.2s; transition: border-color 0.2s, transform 0.2s;
break-inside: avoid;
margin-bottom: 1.25rem;
} }
.card:hover { border-color: var(--accent); transform: translateY(-2px); } .card:hover { border-color: var(--accent); transform: translateY(-2px); }
@@ -180,7 +181,7 @@
@media (max-width: 600px) { @media (max-width: 600px) {
body { padding: 1rem; } body { padding: 1rem; }
.grid { grid-template-columns: 1fr; } .grid { columns: 1; }
} }
</style> </style>
</head> </head>