diff --git a/archivebox/templates/core/snapshot.html b/archivebox/templates/core/snapshot.html
index 8fb3cbb7..98119eaa 100644
--- a/archivebox/templates/core/snapshot.html
+++ b/archivebox/templates/core/snapshot.html
@@ -1054,10 +1054,9 @@
                 object-position: top center;
             }
             .thumb-grid {
-                display: grid;
-                grid-template-columns: repeat(auto-fit, minmax(clamp(180px, 14vw, 250px), 1fr));
-                gap: 6px;
-                align-content: start;
+                display: block;
+                column-width: clamp(180px, 14vw, 250px);
+                column-gap: 6px;
                 width: 100%;
                 max-width: 100%;
                 margin-left: 0;
diff --git a/archivebox/tests/test_ui_admin_snapshot.py b/archivebox/tests/test_ui_admin_snapshot.py
index ac91a82f..5a4cdeb5 100644
--- a/archivebox/tests/test_ui_admin_snapshot.py
+++ b/archivebox/tests/test_ui_admin_snapshot.py
@@ -745,6 +745,15 @@ class TestSnapshotProgressStats:
         assert "event.preventDefault()" in rendered
         assert rendered.count(".on('click', handleSnapshotHeaderToggle)") == 1
 
+    def test_compact_output_cards_pack_into_columns(self):
+        template = (REPO_ROOT / "archivebox" / "templates" / "core" / "snapshot.html").read_text()
+        thumb_grid_css = template.split(".thumb-grid {", 1)[1].split("}", 1)[0]
+
+        assert "display: block;" in thumb_grid_css
+        assert "column-width: clamp(180px, 14vw, 250px);" in thumb_grid_css
+        assert "column-gap: 6px;" in thumb_grid_css
+        assert "grid-template-columns" not in thumb_grid_css
+
 
 class TestSnapshotOutputDeletion:
     @staticmethod